Add Link to img after Onclick Toggle with Jquery - javascript

I wrote a bit of code (with help from stackoverflow) to toggle two images when clicked. But, I want the second image to be linked to another webpage (eg. The App Store).
How can I add a link to the second image, when the images are always going back and forth when I click them?
jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#slick-toggle').click(function() {
$('img',this).attr('src', function(i, oldSrc) {
return oldSrc == 'img/button.png' ? 'img/applestoredownload.png' : 'img/button.png';
});
$('#slickbox').toggle(400);
return false;
});
});
</script>
Relevant HTML:
<div class="co-download-app">
<div class="wrapper">
<div id="imageContainer">
<a href="#1" id="slick-toggle">
<img src="img/button.png"/>
</a>
</div>
</div>
</div>
Where should I add the link that is only reachable by clicking the second image?

I guess your question is when you click on a link that contains an image, the image source will be changed and for the next time when you click on the link again it will redirect to the links href.
One solution is to change something in your code after first-time clicking on the link to use it later. In this case I gave a class to the link and next time you click on the link it will check to see if it has the class or not. If the follow-href class is present it'll skip the rest and if it isn't image source will be changed.
$(document).ready(function() {
$('#slick-toggle').click(function() {
if (!$(this).hasClass('follow-href')) {
var $img = $(this).find("img");
var src = ($img.attr('src') == 'img/button.png') ? 'img/applestoredownload.png' : 'img/button.png';
$img.attr('src', src);
$(this).addClass('follow-href');
$('#slickbox').toggle(400);
return false;
}
});
});
I changed some of your code, but the result should be the same and I hope you don't mind.

Related

How to automatically click a href link when the page loads?

I'm trying to automatically click a href link when the page loads.
<div class="loadmore" kind="rb">
تحميل المزيد...
</div>
The link is supposed to load more comments when you click it.
I tried this:
window.onload = function() {
autoloadmore()
};
function autoloadmore() {
var loadmoreClass = document.getElementsByClassName("loadmore")[0];
var loadmoreChild = loadmoreClass.getElementsByTagName("a");
if(loadmoreClass){
loadmoreChild[0].click();
}
}
but it doesn't seem to work. The problem seems to be with click(), because when I use other codes such as .style.color, they work.
I'm using Blogger by the way.
This's a sample blog:
http://blog-sample-001.blogspot.com/2018/09/title.html
(go to تحميل المزيد...)
ps: I can't change the div.
Assign some ID to تحميل المزيد... . For example, clickAfterPageLoad or whatever you want, and then try this...
$(document).ready(function() {
$("#clickAfterPageLoad").trigger('click');
});
or if you cant't change div, you can do like this:
$(document).ready(function() {
$(".loadmore a").trigger('click');
});

Change css for a div inside currently active div (on pageload)

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');
}
});
});

jquery load image to div after clicking href

I know this has been asked many times here, actually I found plenty of questions, each of them with a very good answer, I also followed those answers, used the different ways I found but I still don't get it to work.
What I'm trying to do is to load an image into a div, after clicking a link, instead of redirecting to a new page.
I'm using Pure Css (http://purecss.io/) to create a menu, the menu is made of a list, and each list item has a link inside it, like so:
<div class="pure-menu pure-menu-open" id="vertical-menu">
<a class="pure-menu-heading">Models</a>
<ul id="std-menu-items">
<li class="pure-menu-heading cat">Menu heading</li>
<li>Model 1</li>
</ul>
</div>
In that same html file, I have another div where I want to load the image:
<div id="model-map"></div>
I've tried the following ways, using jquery, in a separate js file:
I followed the selected answer for this question, which seemed to have the best approach (Can I get the image and load via ajax into div)
$(document).ready(function(){
console.log("ready"); //this shows on console
$('.model-selection').click(function () {
console.log("clicked"); //this doesn't show after clicking
var url = $(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$('#model-map').empty().append(image);
};
image.onerror = function () {
$('#model-map').empty().html('That image is not available.');
}
$('#model-map').empty().html('Loading...');
return false;
});
});
As you see, the console.log("clicked") never executes, I'll be ashamed if it's something stupid, cause it seems that the function is not handling the click event properly.
I get the image of course, but in a new page (default behavior of clicking the href) and I want it to load on the div without being redirected. I hope you can help me.
Thanks in advance!
Edit
The code above is working, and both answers are correct, the issue was due to some code inside tags in my html ( YUI code to create the dropdowns for the menu) and it was conflicting with my js file. I moved it to the actual js file and now it works as expected.
Thanks!
You need to use event.stopPropagation();
$('.model-selection').click(function( event ) {
event.stopPropagation();
// add your code here
});
You just need to prevent the default behavior of moving to a new page for <a> tags, to do this say e.preventDefault() first:
...
$('.model-selection').click(function (e) {
e.preventDefault(); // Stops the redirect
console.log("clicked"); // Now this works
...
)};
...

Hovering over <a> and displaying images based on value

I am currently displaying pictures when an tag is hover over. I have been able to workout the main problem of displaying the picture. The problem is that it has a glitch when hovering occurs quickly. Is there away to avoid that? Also how can i set a default image to display when page is loaded? JSFIDDLE
HTML
<div id="links">
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
</div>
Jquery
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
var ID = $(this).data("content");
$("div#images").children("img#" + ID).hide();
}
);​
Glitch
The problem is that it has a glitch when hovering occurs quickly. Is
there away to avoid that?
This is not a glitch. fadeIn is using animation. As you are hovering over the links faster than the animations complete your experiencing that "glitch".
To ensure you are not clashing with the previous running animation you have to stop any current and any queued animation.
Replace
$("div#images").children("img#" + ID).fadeIn("slow");
with
$("div#images").children("img#" + ID).stop(true, true).fadeIn("slow");
DEMO - Clearing the animation queue before starting the next one
how can i set a default image to display when page is loaded?
I added the code to show a default image as well. To prevent any odd visuals when hovering over a menu item the first time when using a default image. The code checks if we are showing a default image and if we are it will further check if the image for the current menu is the default image.
If it is, it won't hide it as it is showing it anyway but if it is not, it will ide the default image before fading in the new one.
Hope this makes sense, see the full code and DEMO below.
// Indicates if default image is shown
var showingDefaultImage = true;
var $images = $("div#images");
var $defaultImage = $images.children("img#tacos");
// Display a default image
$defaultImage.show();
$("div#links > a").hover(
function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (showingDefaultImage) {
showingDefaultImage = false;
if (!$image.is($defaultImage)) {
$defaultImage.hide();
}
}
$image.stop(true, true).fadeIn("slow");
}, function() {
$images.children().hide();
});​
DEMO - Showing a default image
The code in the above DEMO is also a little more optimized by caching the selectors.
would it be possible to leave up the most recent image from the last
hovered tag ?(instead of hiding the image and leaving a blank)
If I understood you correctly you don't want to hide the image when you leave menu with your mouse but instead want to leave the image of the menu you last hovered over visible.
To do that you remove the second function of the hover and as it is no longer needed you can now attach the mouseenter event instead.
var $images = $("div#images");
var $currentImage = $images.children("img#tacos");
$currentImage .show();
$("div#links > a").mouseenter(function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (!$image.is($currentImage)) {
$currentImage.hide();
}
$currentImage = $image;
$image.stop(true, true).fadeIn("slow");
});
DEMO - Fading in images on mouseenter and leaving last image visible
The above code includes caching of selectors for optimisation and the logic to ensure no "flickering" occurs when the new hovered menu item is the same as the last one which was hovered.
See http://jsfiddle.net/7Wp9z/7/
As François Wahl said, use stop to stop the animations. But instead of using data-content and IDs, I think that you could use index:
HTML:
<div id="links">
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
</div>
<div id="images">
<img src="http://media.smashingmagazine.com/wp-content/uploads/images/brand-ux/cb.jpg">
<img src="http://adventuresoflittlemiss.files.wordpress.com/2012/07/tacos.jpg">
<img src="http://www.growingappetite.com/wp-content/uploads/2011/05/chicken-salad1.jpg">
<img src="http://afflictor.com/wp-content/uploads/2010/10/breadsticks1.jpg">
<img src="http://1.bp.blogspot.com/-IaURSrV70LI/T4YzPubl9EI/AAAAAAAAGSg/AEdd-eLuJUk/s1600/Cooking+Weekly.jpg">
</div>
JavaScript:
$("div#links > a").hover(
function(){
$("#images>img")
.hide()
.stop(true,true)
.eq($(this).index()).fadeIn("slow");
},
function() {
$("#images>img").hide();
}
);
Have you tried not specifying which children should hide on the mouse-out portion?
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
$("div#images").children().hide();
}
);​
The glitch probably occurs because the image isn't loaded yet, you should look up some preloading technique. You will always have to wait for the relevant images to be loaded though before you can show them.
But you could enhance the user experience by either indicating that the images are getting loaded or by simply not activating the hovering effect until the images are loaded.
I'd probably go with the last case since I'm lazy but thats just me.
A simple preloading technique is to declare several id's with different background images and then changing the id dynamically using javascript and thus showing the image.
$("#id-of-element").attr('id','preloaded-bg-div');

Simple Jquery Gallery Question

I am new to Jquery and and trying to build a simple gallery. I know there is lots of plugins, but I don't want to use any of them. my question is very simple. how can I fade in image when click on thumb. also how can I achieve auto fadeIn and Out. I will really appreciate any response. thanks
here is my code.
//HTML
<div class="LargeImage">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="thumbsImages">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
// JavaScript
$(document).ready(function() {
var LargeImages = $(".LargeImages").children();
var SmallImages = $(".thumbsImages").children();
SmallImages.each(function() {
SmallImages.click(function() {
LargeImages.each(function() {
// I have problem here with logic
});
$(this).addClass("active");
$(this).siblings().removeClass("active");
});
});
});
You don't want to call SmallImages.click(...) within the SmallImages.each(...), you'll end up hooking the click event on each image multiple times. (click hooks the handler up to all matching elements inside the jQuery instance you call it on.)
Here's a basic way to do what you're doing without the extra divs:
HTML:
<div class="LargeImage">
</div>
<div class="thumbsImages">
<img class="thumb"
src='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG'
data-fullsize='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=123&d=identicon&r=PG'>
<img class="thumb"
src='http://www.gravatar.com/avatar/92e9e88f33ab596fa1caaf237a4d5fad?s=32&d=identicon&r=PG'
data-fullsize='http://www.gravatar.com/avatar/92e9e88f33ab596fa1caaf237a4d5fad?s=123&d=identicon&r=PG'>
<img class="thumb"
src='http://www.gravatar.com/avatar/c3203aa647aeb214c463c59f1af2c38f?s=32&d=identicon&r=PG'
data-fullsize='http://www.gravatar.com/avatar/c3203aa647aeb214c463c59f1af2c38f?s=128&d=identicon&r=PG'>
</div>
</div>
JavaScript:
jQuery(function($) {
// Look up the large image once and remember it
var largeImage = $(".LargeImage");
// Hook the click event on the thumbnails
$(".thumbsImages img").click(function() {
var fullsize, hasImage;
// Get the full size version from the attribute
fullsize = $(this).attr("data-fullsize");
// Flag up whether there's current an image in the large area
hasImage = largeImage.find('img').length == 0;
// Fade out whatever's there, then fade in the new image;
// the `hasImage` check just makes the fadeOut really fast if
// there's nothing showing.
largeImage.fadeOut(hasImage ? 0 : 250, function() {
largeImage.html("<img src='" + fullsize + "'>").fadeIn(250);
});
});
});​
Live example
Basically, what I'm doing there is storing the URL of the full size version in the img element for the thumbnail as data-fullsize (the data- prefix means that the attribute will validate under HTML5; prior to HTML5 there's no official way to have your own attributes, but browsers allow it even though it's technically invalid). Then, when the user clicks an image, we fade out whatever's showing in the big div, then replace it with the full-size image and fade in.
An idea of what you should do:
$(document).ready(function()
{
$('.thumbsImages').click(function()
{
var index = $('.active').prevAll('div').length; //number of previous siblings
$('.LargeImage').find('div:eq('+index+')').fadeOut(500); //hide the actual showed element
$('.active').removeClass("active"); //remove the active class
$(this).addClass("active"); //add class to the actual clicked item
index = $(this).prevAll('div').length; //number of previous siblings
$('.LargeImage').find('div:eq('+index+')').fadeIn(500); //show the actual selected image
});
});
It's not a really optimized code. But it's simple to understand. ;)
I don't know if it's what you´re needing, but I hope it helps!

Categories

Resources