I'm creating a resource database that has a scrolling container on the side. Essentially, when you click a thumbnail within the container, it will load the contents of a div which will fade in and display content for that category. Each div tag looks something like this:
<div>
<h2>Category1</h2>
<p><a style="float:right" class="a_demo_four" href="/Resources/file1.pdf" target="_blank">
Download
</a>File Desc</p>
<hr/>
</div>
And will load as such:
Essentially, I want to be able to display the same exact content when I open another category on this page. I have several different categories, and want to be able to pull the code from say Category1, Category2, and so on and so forth so I can display all of them in a "View All" tab. I've attempted to use jQuery's load function as seen below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
<h1>This is why I rule</h1>
</body>
</html>
to load the content from the original div into the view all category, but nothing shows up. Unfortunately, I have very limited knowledge with Javascript/jQuery so I'm having difficulty being able to use the same content in a different div without just copying and pasting the code over. This would also pose problems in the future when I am adding files and have to edit the code twice if I did so.
Thank you in advance!
You can keep your content in a variable like this:
var content = '';
$(document).ready(function(){
//load first in a div
$('#includedContent').load('b.html', function(result){
content = result;
//from here on, you know you have b.html data in the variable content
//and you can use it elsewhere like this
$('#anotherDivId').html(content);
});
});
If you call your code within document ready function will work.
Try,
$(document).ready(function(){
$("#includedContent").load("b.html");
});
However you will probably need to keep it somewhere as visualex suggested in order to add the content in multiple places as you require.
This is a working jsfiddle,
http://jsfiddle.net/c5SAH/show/
it loads content from
http://jsfiddle.net/gfgE8/show/
Related
New to JS. Couldn't find any good solutions for this after researching, and seems like it shouldn't be too complicated.
Say I have a page called page1.html with this code:
<div class="page1">
<div class="wrapper">
<p>Some text.</p>
</div>
</div>
Now, I have a second page, page2.html, with this code:
<div class="page2">
</div>
I want to make a copy of the div with class wrapper from page1.html, and insert it into page2.html, within the div with class page2.
Both pages share the same script.js file.
I tried something like this:
page1content = document.querySelector('.wrapper');
page2content = document.querySelector('.page2');
page2content.append(page1content);
However, I'm getting errors on page1.html because the js can't find the div with class page2, and I'm getting errors on page2.html because the js can't find the div with class wrapper.
I found a similar question here, and a couple comments suggest using localStorage.
I am unfamiliar with localStorage so I tried to do some research, and tried something like this:
On page1.html I inserted this script at the bottom:
<script>
var pageContent = document.querySelector(".page1").innerHTML;
sessionStorage.setItem("page1content", pageContent);
</script>
On page2.html I inserted this script at the bottom:
<script>
document.querySelector(".page2").innerHTML=sessionStorage.getItem("page1content");
</script>
It didn't work for me, but perhaps I used it incorrectly.
I also tried to use cloneNode(), but again, wasn't sure how to transplant the clone of the element onto a new page, only onto the same page I'm cloning from.
Is there another way to accomplish what I'm trying to do?
Obviously this is a very basic example; my actual code will be pumping in much more content from page 1 to page 2, but I just want to get the concept working at least.
The code I had in my example in the description was almost correct, I just had to change sessionStorage to localStorage and it worked.
List item
I am using the following code to hide a div and show the other.
page1
<a id="show" href="2#dk" onclick='document();'>mylink</a>
<a id="show1" href="2#dh" onclick='document();'>mylink</a>
page 2
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("dk").show();
$("dh").hide();
});
$("#show1").click(function(){
$("dh").show();
$("dk").hide();
});
});
</script>
</head>
<body>
<div id="dk">mylink</a>
<div id="dh">mylink</a>
</body>
</html>
This works on one page but not after the anchor tag loads up another page.
PREMISE
I have pages:-
first
second
I want links on on page and divs on second page
frist page links
divs
OBJECTIVE
If the page is first page, links need to be on this page
If the page is second page, then I wish to hide the divs that are not link to the link thats clicked
you can see here what i mean even i will put account detials that ppl can look at code and try if they want
http://testscripten.enjin.com/login
username:testscripten
password:test12345
go to admin and then edit
page layout and next to text will a pencil to change html or java
I think you can use window.location.href to get the link of the page you're currently on and then accordingly hide/show your buttons.
JAVASCRIPT
var pageName = window.location.href;
$(document).ready(function(){
if(pageName === "dh"){
$("#show").show();
$("#show1").hide();
} else if(pageName === "dk") {
$("show1").show();
$("show").hide();
}
});
HTML
<a id="show" href="dk">mylink</a> <!--No need for onclick if you're using jQuery-->
<a id="show1" href="dh">mylink</a> <!--No need for onclick if you're using jQuery-->
I am not sure of "dk" and "dh" being real links, if you have kept those as placeholders then this should work.
Simply show/hide based upon the path name containing the strings you specify:
$(document).ready(function(){
$('div.toShowOnFirstPage').toggle(location.pathname.indexOf("first")!== -1);
$('div.toShowOnSecondPage').toggle(location.pathname.indexOf("second")!== -1);
});
use AngularJS and SPA model to avoid page reload.
You can use also variables in url
If you need to reload page and have values on different pages you have to set cookie or webStorage http://www.w3schools.com/html/html5_webstorage.asp
Why don't you use php?
What I want to do is to show the content of a HTML page at the bottom right corner of a page through my js script like below
In order to accomplish this, I do not want to put a div in the page and then the page to be appeared in it, BUT with somehow to place it there alternatively.
The goal is to edit nothing from the page, all the magic must be done through the .js file.
So for now what I have is this :
<div id="topBar"> HOME </div>
<div id ="content"> </div>
<script>
function load_home()
{
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
</script>
but it loads the page where I place the div, not overlay.
How to do this?
If JQuery is ok with you, then you can have a look at the following options
http://www.erichynds.com/examples/jquery-notify/
http://notifyjs.com/ (This one has same effect like the one described in above image)
You can load the html page via AJAX and then render it into the DIVs created using any of the above plugin.
For cross domains, you may have to try out following approach
http://www.leggetter.co.uk/2010/03/12/making-cross-domain-javascript-requests-using-xmlhttprequest-or-xdomainrequest.html
Through ArrowChat Javascript API, I'm trying to make avatars show in chat user tabs, that is "on the bar itself", besides in the buddy list and chat window.
I'm editing chat_tab.php (below) for this, starting with a sample static No-Avatar image, and next, I'll try to implement ArrowChat Javascript API functions.
<div class="arrowchat_inner_button" id="chattab_inner">
<div style="float:left" class="arrowchat_username_message">'+shortname+'</div>
</div>
All I want to know for now is that if there's something wrong with this script, as it doesn't seem to work.
Here's the code:
<script type="text/javascript">
window.onload=function(){var elem=document.createElement("elem");
elem.src= "/press/chat/admin/images/img-no-avatar.gif";
elem.height="32"; elem.width="32"; document.getElementById("chattab_inner").appendChild(elem);}
</script>
Next, I should replace img-no-avatar.gif with the user avatar path, which is getUser(data.a) according to the link above. That's the second in the row I don't know how. (You can preview ArrowChat chat bar at the bottom of the screen in the same page.)
The element you are created should be "img" not "elem"
you want the parameter for .createElement() to be the tag name of the element.
<script type="text/javascript">
window.onload=function(){
var elem=document.createElement("img");
elem.src= "/press/chat/admin/images/img-no-avatar.gif";
elem.height="32";
elem.width="32";
document.getElementById("chattab_inner").appendChild(elem);
}
</script>
I have this code :
HTML
Show Agency
<div id="invisibleDiv">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
jQuery
$("#showDiv").click(function () {
$("#invisibleDiv").show();
});
CSS
#invisibleDiv
{
display:none;
}
When I load the page, I see the scripts loaded from external source, also if the div is hidden. The scripts call with some API and generate HTML/Javascript.
Well, what I'm looking for is to force the script to be unloaded if the parent is hidden; than, when I'll show it (through the link), load the script inside the div.
How can I do it? I'll avoid AJAX.
UPDATED:
DEMO: http://jsfiddle.net/HqeD2/
Show Agency
<div id="invisibleDiv">
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
$(function() {
$("#showDiv").click(function() {
$.getScript("http://platform.linkedin.com/in.js");
});
});
If I understand it correctly, you just want to delay the running of arbitrary scripts that are provided by the third party? Would something like this work?
<div id="invisibleDiv" style="display:none">Please wait while we load some stuff from Facebook...</div>
$("#showDiv").click(function(){
$("#invisibleDiv").show().load("http://facebook.com/whatever/andStuff");
});
Has the downside that you can't pre-fetch the HTML content, but I don't see any other way.
EDIT: ok, it looks like you edited the question whle I was typing this up... so YOU control the content of invisibleDiv, but you want to delay the loading of in.js? try this...
$("#showDiv").click(function(){
$("#pleaseWaitDiv").show();
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
});
Again, you have to make the user wait while the script downloads, hence my addition of pleaseWaitDiv
More edit:
New up a script node and append it.
var scriptNode = $("<script></script>")
.attr("type","IN/CompanyProfile")
.attr("data-id","1035")
.attr("data-format","inline")
.attr("data-related","false");
$("#invisibleDiv").append(scriptNode);
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
You can bind it to your showDiv click function, inline scripts are processed right away...the only other thing I can think of is to have the script be loaded via ajax which you don't want.
Try this :
http://jsfiddle.net/sXJa6/6/