I have multiple instances of
<div class="picOuterDiv">
<a href="examplepage.php?var=1" class="iframe" > page one </a>
</div>
<div class="picOuterDiv">
<a href="examplepage.php?var=2" class="iframe" > page two </a>
</div>
Now I am using jQuery colorbox plugin to create Lightbox's. The lightBox opens when i click the anchor element, The anchor element with the class iframe. It works fine till here, using
$(".iframe").colorbox({iframe:true, width:"646", height:"675"});
What I want is to open the colorbox when I click the parent div. I used the following code to trigger anchor element href when div was clicked, but apparently the href alone wasnt enough, the element clicked should have the class "iframe" . So its not working with this code.
$('.picOuterDiv').each(function(){
$(this).on('click', function(){
location.href = $(this).find('a').attr('href');
});
});
So can anybody help me on how I can make this work ? I hope the Problem is clear. Thank you in advance.
UPDATE: http://jsfiddle.net/VhkFN/3/
$('.picOuterDiv').click(function() {
window.location.href=$(this).find('a').attr('href');
});
There are a couple issues with your fiddle. First "var arr[]" is not correct. Second, the hyperlink doesn't have any onclick property, so triggering a click won't do much. You need to grab its href attribute instead.
Demo: http://jsfiddle.net/VhkFN/4/
This was what worked for me. As i said i was using jquery colorbox.
$(".picOuterDiv").click(function () {
var anchorHref = $(this).find('a').attr('href');
$(this).colorbox ({iframe:true, width:"646", height:"675", href: anchorHref});
});
Related
i have a script, after finishing something, a button with an link will appear, before the button is not clickable. but i have a problem.
this is the code:
FB.ui(e, function(t) {
if (t["post_id"]) {
//your download content goes here
// Do something there
var secret_data = "<a href=\"http://TEST.com\">";
jQuery("#results").html(secret_data);
}
})
<div id="results"><img src="img/button.png"></a>
I thought that after finishing this action that the code would look like this:
<img src="img/button.png">
But it isn't..
So does someone have the answer ?
If you are trying to wrap an <a> around an existing image use wrap()
$('#results img').wrap('');
Using html() replaces everything in the target element with the new content
Your html for button should be a div with button image(not clickable) like
<div id="results"><img src="img/button.png"></a>
And Javascript code to add the active button should be like
var secret_data = '<img src="img/button.png">';
jQuery("#results").html(secret_data);
This should do the trick.
I have a page which users get to by clicking through an ebook. When they click a link it takes them to a product on the page depending on the link so it looks like
example.com/#product1
example.com/#product6
example.com/#product15,
etc...
The page already scrolls to that part of the page using this code:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('html,body').animate({
scrollTop: jQuery(window.location.hash).offset().top-150
}, 900, 'swing');
});
I have another div within the #product1 div called #amazonbutton with a style of display:none.
<div id="product1" class="product">
<a href="link">
<div id="amazonbutton"><img src="amazonbuttonz" />
</div>
</a>
</div>
This is because it's a "go to amazon" button hidden for all items except the currently selected div. So basically, the button should display for the :active div while staying in its original state (hidden) for all inactive divs.
How can I change this with jquery?
I have this bit of code which is incomplete and I'm stuck:
jQuery(function() {
jQuery('amazonbutton').each(function() {
if (jQuery(this).attr('href') === window.location.href) {
jQuery(this).addClass('active');
}
});
});
Thank you in advance!
There is a cool thing called document.activeElement . It is a read only property that tracks the current active element.
$('.yourdivclass').hide();
$(document.activeElement).show();
You can activate a element by .focus() .activate()
Firstly, you looped the amazonbutton, in your code i saw that it wasn't a link. So you can't check the attr href. I guess that you want to check the href of amazonbutton's parent. Secondly, amazonbutton in your loop is a class or id? You must add . or # to it. The code could be:
jQuery(function() {
jQuery('#amazonbutton').each(function() {
if (jQuery(this).parent().attr('href') === window.location.href) {
jQuery(this).addClass('active');
}
});
});
I would like to have an iframe inserted into a column div on my web page when someone clicks on it. How do I make this possible? When someone is just viewing the page the iframe will be made invisible, but when a button is clicked the iframe will be made visible. How can I do this?
Give your iframe a class like hidden iframe then add the following JavaScript before the closing </body> tag:
Your Frame
<iframe src="..." other-iframe-stuff="" class="hidden iframe">
</iframe>
JS
<script>
$(function(){
$(".your-toggle-btn").click(function(){
$(".iframe").removeClass("hidden");
});
});
</script>
Your button should have a your-toggle-btn class and define the following CSS styles:
CSS
.hidden {
display: none;
}
Give your iframe and button classes or data-attributes, so you can reference them.
Then create an event that displays the iframe on button click, using jQuerys hide() and show() functions. It's important that the iframe is visible to start with if you wan't the site to function when javascript is turned off.
<script>
$(function(){
var $button = $('.iframe-opener'); // or [data-iframe-opener]
var $iframe = $('.iframe'); // or [data-iframe]
$iframe.hide();
$button.click(function() {
$iframe.show();
});
});
</script>
I've never run into this problem... can someone help me with this?
my ".click" jQuery function is not calling. I'm confident that it's my syntax, but I cannot find the mistake!
Working jsFiddle here: http://jsfiddle.net/cQ43Z/
HTML:
<a id = 'emailoff' href = "" target = "_blank">
<img id= 'email-btn' src="http://www.clker.com/cliparts/2/a/r/5/G/O/save-button-png-hi.png"/>
</a>
Javascript:
$('#email-btn').click(function(){
console.log('email btn clicked');
});
Your img tag has an id of save-btn while you are attaching the click event to email-btn. Either you didn't post all your code or you named your button wrong.
EDIT: Now the problem is that your a tag is redirecting the user off the page. If you don't want that to happen then you should set the href attribute to javascript:;.
<a id = 'emailoff' href = "javascript:;">
You don't need the target attribute either. And unless you are using the a tag for something else, it is entirely unnecessary itself.
This is my first incursion in jQuery so I am really newbie with this. I read the documentation (actually, I am still on it) to get to know it better!
The thing is that I have a website with several links into a li element and I want to achieve that every time I click in one of these links, a certain piece of text will appear in a div id="container" in the webpage.
How could I do this?
Quick, simple answer:
$('#yourlist li a').click(function(){
//grab link's href attribute
var href = $(this).attr('href');
//update content
$('#container').html("Loading page " + href + "...");
//load page via AJAX using link's href
$('#container').load(href);
});
I added more code to show how you would access the given link using $(this) and further load its href via AJAX.
$('li a').click(function(){
$('#container').html('Text you want to add');
});
try
<script src="your/downloaded/jquery/path.js></script>
<script>
$(document).ready(function() {
$('a#idOfLink').click(function() {
$("div#container").html("<span class='red'>Your certain text</span>");
});
})
</script>