I'm looking to change the color of the button or in this case the image of the button each time the button is selected on the toggle of the jQuery. Here's what I have so far for jQuery.
jQuery(document).ready(function () {
jQuery('#occupation').hide();
jQuery('#occupationshow').on('click', function (event) {
jQuery('#occupation').toggle();
});
});
And here's what I have for the button:
<button id="occupationshow">
<img src="../SiteAssets/images/RAC/askcut/Occupation.jpg">
</button>
How can I get it so another image is displayed on the button when the button has been clicked?
The best way to do this is I think the following:
Create a sprite image of the two backgrounds for this button - so, one image file, with the two images side by side.
Set this image as the background-image of the element using CSS
Giving your button#occupationshow a fixed width/height, have the jquery modify the background-position of the image depending on the state of the button - simply put, depending on the current state of the button, the image will move left/right within button#occupationshow and you will only be able to see the relevant part at any one time.
You can as suggested modify the src attribute dynamically, but do bear in mind that with this approach the new image might take a moment to load once the button is clicked; with my approach both images are preloaded (as they are one image) and it's simply moving around, and so is instant.
Sprites are a great way of working, I'd recommend looking into them :-)
You can use the css function of jquery to change the background image of a button on every click.
toggle() by default is for showing/hiding. Use attr() with a callback function
jQuery('#occupationshow').on('click', function (event) {
jQuery(this).find('img').attr('src', function(){
var src = $(this).attr('src') == 'img1' ? 'img2' : 'img1';
return src;
});
});
I guess you only have two images, right?
So what you can do is put two tags, corresponding to both of your images, ont being set as "display: none".
<button id="occupationshow">
<img src="../img1.jpg">
<img src="../img2.jpg" style="display: none;">
</button>
And in jQuery your code will be :
jQuery('#occupationshow').on('click', function (e) {
jQuery('#occupationshow img').toggle();
});
Edit: I re-read the first post again and don't know what made me guess OP only had two images... (the fact he wants to use "toggle", I guess)
Related
I have 12 buttons each with an ID, i'm using this script for the action.
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
});
});
WEyear18000, is the id of button, WEtextarea, is the id of the div where txt is displayed on button click, WEimage_view, is the id of the div where new image displayed on same button click, WEee24f5837, is the id to close a collapsible panel where buttons are located.
There are 12 of these script statements in a .js file.
It all works but it causes some strange effects after the 2nd or another button is clicked, all the images on the page disappear but the one on the button click. Page is here, page with issue
Any suggestion on how to stream line script wanted. I a newbe to scripting but managed to hodgepodge this to work but has and adverse affect on the rest of the pages images. Suggestion and samples to jsfiddle. Thanks in advance.
<div id="wrapper">
<div id="WEtextarea"> </div>
<div id="WEimage_view"></div>
</div>
CSS controls size and all aspects of div.
I tried all your menu items... And did not notice such a bug.
So, while your're here... I have a suggestion to reduce your long script made of a small chunk repeated 12 times.
I would define the maps as objects, like this:
var maps = [
{
buttonId: "WEyear18000",
text: "Files/Docs/y18000.txt",
image: "Files/Image/treesimages/PalaeoGlaciolMaps.jpg"
},
{
// other 11 objects using the same structure...
}
];
And I would just add a class to each items, in the HTML, like this:
<div id="WEyear18000" class="BaseDiv RBoth OEWELinkButton OESK_WELinkButton_Default OECenterAH clickHandlerClass" style="z-index:1">
Then, I would use a shorter function like this one:
$(document).ready(function() {
$(".clickHandlerClass").click(function(){
// Get the id of the clicked menu item
var thisId = $(this).attr("id");
// Find its related object
var mapIndex = -1;
for(i=0;i<maps.length;i++){
if( maps[i].buttonId == thisId ){
mapIndex = i;
}
}
if(mapIndex != -1){
// Use the object infos in the page elements.
$("#WEtextarea").load(maps[mapIndex].text);
$('#WEimage_view').html('<img src="'+maps[mapIndex].image+'" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
}else{
console.log("Undefined map or id error...");
}
});
});
The array of objects is way easier to maintain... And an additional button easier to add.
You can use another class name than "clickHandlerClass".
;)
The wheelzoom looked like the only possible source of error to me. So I looked for its source, and found:
Wheelzoom replaces an img's background-image with its src. Then the src is set to a transparent image.
So, on the first wheelzoom, you get src transeparent, and on the second, you get a transparent background-image as well.
You can fix this by calling wheelzoom only on your new image:
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
//wheelzoom(document.querySelectorAll('img'));
wheelzoom(document.querySelectorAll('#WEimage_view img'));
});
to fix your bug you need to replace:
wheelzoom(document.querySelectorAll('img'));
with:
wheelzoom(document.querySelectorAll('#WEimage_view img'))
So only the images in the #WEimage_view will be affected by wheelzoom
To explain the situation ,I am using both jquery and animate.css combined in order to bring about some animation part that i want to apply to my website.
http://lifeto.cafe24.com/xe/
I have a couple of questions in this post, and it needs fairly thorough understanding of the site that i have built.
Fist, If you go to the webstie I linked above and click on the menu that says '공지사항' on the bottom, an iframe src gets triggered by jquery attr.
And if you click on any of the image you can see on the board after that, the board content (#window_frame) slidesout to left and the new div (.window_board) slides in from the leftside.
but when you click on the image, notice the content of the board AND the .window_board disappear and appear AT THE SAME TIME.
what i want to achieve here is to have the #window_frame slides out first, and THEN, after it is done, have .window_board slides in.
and SECONDLY, when i click on the menu button that says '공지사항' from the point when the .window_board is still opened, i want the .window_board to slides back in, and have the content(#window_frame) comes back out.
I wonder if it's possible to achieve this only by using simple jquery events, as it needs to calculate when the #window_frame is opened or not.
here is the complete js for the board (iframe)
jQuery(document).ready(function(){
jQuery(document).on('click', '.item', function() {
jQuery('.loader_container', parent.document.body).show();
var url = jQuery(this).data('url');
jQuery('#window_board', parent.document.body).attr('src', 'url',200);
jQuery('#window_frame', parent.document.body).addClass('animated slideOutLeft');
jQuery('.window_board', parent.document.body).addClass('open animated slideInLeft');
jQuery('.loader_container', parent.document.body).hide();
});
});
and the main menu:
<a onclick="jQuery('#window_frame').attr('src',
'http://lifeto.cafe24.com{$val1['href']}',200),
jQuery('#window_frame').removeClass('animated slideOutLeft')" class="menu_a">MENU</a>
Your question not clear so much, but if i consider only your main question:
how to execute jquery function after one another
you can use promise().done() or .when() to execute a jquery function after another.
Example:
$('div').click(function(){
$(this).addClass('blah').promise().done(function(){
alert('class added!');
});
});
You can read more about it:
https://api.jquery.com/promise/
I am using the jQuery gridrotator effect for my photo gallery. This plugin creates a grid of images inside a number of columns and rows which will arrange the images into the grid and the remaining images will appear with different animations and delays. But to do this the tag <img> is removed and is replaced by anchor <a> with src into the style.
from this:
<img src="thumbnail/23.jpg"/>
to this:
<a href="#" style="background-image: url(thumbnail/23.jpg);">
I want to disable that rotator effect and keep static images by clicking on a button. So I tried to add the <img> tag and remove anchor tag:
$("#destroy").click(function(){
$("#ri-grid").attr('id','ri-order');
var anchor = $("#ri-order").children('ul').find('a');
anchor.each( function() {
var bg = $(this).css('background-image');
bg = bg.replace('url(','').replace(')','');
$(this).parent().append('<img />');
$(this).parent().find('img').attr( 'src' , bg );
$(this).remove();
});
});
Here is the example. If you click on "Disable Effect" button you can see that my code works fine but after a few seconds the tag anchor and the animation returns in the DOM.
Why? Is there a way to disable that effect? or how can I disable or destroy the gridrotator() function?
Thank you so much for any help!
var Grid = $("#ri-grid").clone();
$("#ri-grid").html("").replaceWith(Grid);
$(".ri-grid").attr("id", "ri-grid-new");
Add this to the beginning of your $("#destroy").click function and that should do the trick.
<div class="btnSection">
<img src="images/star.png">Save Progress
</div>
I'm trying to get this to work with a jquery popup plugin. The plugin requires you to click a button for the popup to take affect. How can I make my Image/Button activate that jquery?
This is the popup I'm trying to use : http://dinbror.dk/bpopup/
The button is drawn with CSS and then the image is just a little icon to the left.
$("btnSection").click(function () {
//make the animation for the div to show up
$(".myDiv").popUp();
});
Hope this helps.
you mean like:
$("a.split-btn").find("img").click(function() {
$('element_to_pop_up').bPopup();
});
Updated::
to bind more than 1 images, add same class o all your required images, say "img-class", and do:
$(".img-class").click(function() {
$('element_to_pop_up').bPopup();
});
I'm new to jQuery and found the toggle function really attractive. I wanted an image to switch to different image after a click and back again, like this:
$(document).ready(function() {
$("#expand").toggle(function(){
$(this).attr("src","images/expandWidget.png");
},function(){
$(this).attr("src", "images/minimizeWidget.png");
});
}); // end ready
And the image itself is declared like this:
<img id="expand" src="images/minimizeWidget.png"></img></div>
I notice that when I ran this through Chrome, the image changed to:
<img id="expand" src="images/minimizeWidget.png" style="display: none;">
And my image did not show. Why did Chrome do that? If I instead change the toggle to click(), my image shows without a problem and I can switch to a different image, but not back of course. I have no errors in the console and the page doesn't import other styles that would affect img. Am I using the toggle incorrectly? Please let me know if you need more information.
Thanks
Instead of toggle use .click()
LIVE DEMO
var images = ["images/expandWidget.png", "images/minimizeWidget.png"], c=0;
$("#expand").click(function(){
this.src = images[++c%2];
});
You've misunderstood what jQuery toggle does.
It 'toggles' the visibility of an element, hence it disappearing. It's not the greatest name admittedly, but we all used to have to write our own version of the toggle method inside .click().
See the documentation:
http://api.jquery.com/toggle/
You probably want something like:
$("#expand").click(function(){
if($(this).attr("src") == "images/expandWidget.png") {
$(this).attr("src", "images/minimizeWidget.png");
} else {
$(this).attr("src","images/expandWidget.png");
}
});