I just figured out how to use Facebox. I can open hidden divs in Facebox but how do I get it to dump the current div and load another one without closing the pop-up? I want the Facebox pop-up to load another div (while dumping the previous one) if the user clicks on a link inside the pop-up. I already tried something like this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({})
})
</script>
Div1
<div id="div1" style="display:none;">
Load the other div
</div>
<div id="div2" style="display:none;">
<p>Other div</p>
</div>
I somehow knew it wasn't this simple. I already tried searching the net for answers but no dice. Is this even possible? I'm a complete noob when it comes to Javascript so please bear with me.
I found the answer already. Apparently, you need to bind it to a mouseclick event and perform recursion. Here's how I did it:
<script type="text/javascript">
function find_hidden(){
$('.infinite')
.unbind('click')
.bind('click', function() {
var glink = $(this).attr('href');
jQuery.facebox({div: glink});
find_hidden();
});
}
</script>
I found the answer here.
From skimming through the source, I think you can just pass a string, like this:
$.facebox('<div>test</div>');
Try this:
jQuery("#facebox_overlay").click();jQuery.facebox({ div: '#your-new-div-id' });
Related
I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>
The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.
I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});
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/
I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.
I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo
In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)
$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});
We can use an iframe to display the link in the <a> tag.
Here's a fiddle
Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});
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/
Is it possible to copy javascript with javascript? For example:
<div class="copyThis">
<script language="javascript">
$(function()
{
$("#click").click(function(e){
$('.copyThis').clone().appendTo('#copyArea');
e.preventDefault();
});
});
</script>
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
<div style="width: 200px; height: 50px; background-color: gray;">
<a id="click" href="">click here to copy</a>
</div>
<div id="copyArea">
Put here:
</div>
</div>
But this doesn't copy the tag and its content. At least, not that I know of.
NOTE:
I came upon this question in relationship to a different question I had posted here: Infinite-loop question: Is it possible to make a "Copy this code to share", with a "copy this code to share" inside of it?
I hope it's ok to post this question separately as it's sort of a curiosity thing.
EDIT: I think this is what you want. This (demo) will fill a textarea for easy copying:
<div id="copyThis">
<script language="javascript">
$(function()
{
$("#click").click(function(e){
$('#copyArea').val($('#copyThis').html());
e.preventDefault();
});
});
</script>
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
<div style="width: 200px; height: 50px; background-color: gray;">
<a id="click" href="">click here to copy</a>
</div>
<textarea rows="10" cols="40" id="copyArea"></textarea>
</div>
You were doing DOM manipulation before ready. Use:
<script language="javascript">
$(function()
{
$("#click").click(function(e){
$('#copyThis').clone().appendTo('#copyArea');
e.preventDefault();
});
});
</script>
See the demo.
I think in a round about way what your trying to do is covered by jquery's live methods.
<div class="copy">
<a class="click-me">click me</click>
</div>
<script type="text/javascript">
$('.click-me').live('click',function(e){
$(e).parent().clone().appendTo('#copyArea');
})
</script>
Using Live will re-bind the new element to the click handler without having to copy a javascript block
If you want the click event to be cloned also, you need to set the withDataAndEvents argument to true in clone
$('.copyThis').clone(true).appendTo('#copyArea');
Note: this answer is to a question different from the one actually asked :-) I'll leave it here as a historical curiosity however.
The problem is very likely to be that your <script> tags are just not being executed. If what you want to happen is that your cloned <div> have the same "click" handler, however, you should really go about it in a totally different way:
Use a "class" instead of an "id" to mark the <div> elements that should be affected; say, "cloneMe"
Use the jQuery .live() or (better) .delegate() facilities to set up the handler so that it operates off of bubbled events, and can therefore handle clicks on cloned <div> blocks.
(then in your Javascript somewhere: )
$(function() {
$('body').delegate("div.cloneMe", "click", function(ev) {
$(this).clone().appendTo('#copyArea');
ev.preventDefault();
});
});
Now you should be able to clone to your heart's content, and you don't have to worry about that bad old Javascript jammed so obtrusively into your code.
edit — ah - I now see that I was completely confused about what it was that was getting clicked. If the clicking is happening on a separate button (or <a> or whatever), then there's really no need to have the script stuck in the middle of the page at all; the whole thing should just be a simple event handler setup.