I am trying to get a background image to change on the click of a link. In the page, there is a php function that gets all of the files (just images) from a directory and writes the following for each item:
print("
$(\"#photo" . "$curimage\").click(function(e){
e.preventDefault();
$(\"#galleryPhoto\").css(\"background-image\", \"url(images/ints/$file)\");
});
");
The entire code (for just one item) ends up looking like this:
<script type="text/javascript">
$(function(){
$("#photo1").click(function(e){
e.preventDefault();
$("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
});
return false;
});
</script>
In the body of the page, there is another php section that does the same thing, but this time it provides the link:
print("<a id=\"photo" . "$curimage\" href=\"#\" >Change</a>");
This, of course, gives a completed link of:
<a id="photo1" href="#" >Change</a>
In addition, there is a div with the id of galleryPhoto, with the following settings in the css:
<div id='galleryPhoto'>
Main photo here
</div>
#galleryPhoto {
position: relative;
height: 300px;
width: 600px;
background-color: black;
background-image: url(../images/ints/blank.jpg);
background-size: contain;
background-repeat: no-repeat;
margin: 20px;
}
But when the link is clicked, the background image does not change. I am clueless on what I am doing wrong. I have tried so many different things that the code is probably all messed up now, but I don't know why (JQuery newbie, sorry).
Can someone please point me in the right direction?
Since your html is being generated dynamically through PHP ensure that you are using the .on function. So anytime that your html is being generated dynamically it's best to use the .on function.
So instead of using this:
$("#photo1").click(function(e){
e.preventDefault();
$("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
});
You would use this:
$(document).on('click', '#photo1', function(e){
e.preventDefault();
$("#galleryPhoto").css("background-image", "url(images/ints/001.jpg)");
});
You have to set the height and width of your #galleryPhoto div because Background image base its height and width on it's container. Unlike <img> takes the image height and width if not defined
Related
so on my site I created a functionality where when I hover on one of the side buttons the image of the tree in the middle changes. You can see the page here.
The animation is working ok, but now I am trying to make the background image responsive within the div. Thanks to this other jsfiddle, I was able to make the original background image responsive using the following CSS:
#arvore {
background: url('http://vistacamisa.greenpeace.org.br/wp-content/uploads/2015/09/arvore_011.png');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 92.7%;
}
The problem is that this CSS does not apply to the image that shows when I hover on the button, and I've hit a roadblock as to how to make it work. Any ideas or suggestions would be much appreciated!
I'm using the following jQuery:
<script type="text/javascript">
(function($){
$('.arvorehover').hover(function(){
$('#arvore').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
$('#arvore').css({'background':''});
});
})(jQuery)
</script>
My buttons have a class .arvorehover and the div with the tree image has the id #arvore.
Thanks so much!
When you set the hover background in your JavaScript using this:
$('#arvore').css({'background':'url('+ $(this).attr('target') +')'});
...it adds a style attribute to the tag: <div id="arvore" style="background:url(....)">, which overrides your entire CSS background declaration, which in turn sets background-size to auto. You can fix your current code by changing only the background-image property:
<script type="text/javascript">
(function($){
$('.arvorehover').hover(function(){
$('#arvore').css({'background-image':'url('+ $(this).attr('target') +')'});
},function(){
$('#arvore').css({'background-image':''});
});
})(jQuery)
</script>
Alternately you can keep the styling in your CSS by toggling a class in your JavaScript:
<script type="text/javascript">
(function($){
$('.arvorehover').hover(function(){
$('#arvore').addClass('hover');
},function(){
$('#arvore').removeClass('hover')
});
})(jQuery)
</script>
And then in your CSS:
#arvore.hover {
background-image: url("some-url");
}
I want to embed Wanelo's share button.
This is the embed code:
<a class="wanelo-save-button"
href="//wanelo.com/"
data-url=""
data-title=""
data-image=""
data-price=""></a><script async="true" type="text/javascript" src="//cdn-saveit.wanelo.com/bookmarklet/3/save.js"></script>
When I embed it, I get this button:
I want to replace that button with their icon, which looks like this:
Being new to JS, I am unable to understand how I can swap that button from being generated and have this icon be in it's place while still making the share feature work.
Here's their link: http://wanelo.com/about/buttons#save-button
My JSFIDDLE:
http://jsfiddle.net/VCG8c/
Please point me in the right direction.
The button is being loaded dynamically via JS with inline CSS. So in the anchor tag, do this:
style="background:none !important;"
Ok, here is a the updated version of your fiddle, all nice and working. Basically, the little JS snippet at "save.js" changes your anchor by adding an appropriate background image (in this case, the rectangular button that says "Wanelo"). So, that will need to be replaced inline - this will change the background image to the one you want. Of course, the default CSS style associated with "wanelo-save-button" looks like crap, so you'll need to make some stylistic changes in a custom class.
The JS:
setTimeout(function(){
//Get the anchor element
var anchor = document.querySelectorAll('a.wanelo-save-button')[0];
//Change the backgroundImage property
anchor.style.backgroundImage = 'url("http://i.stack.imgur.com/X0r5e.png")';
//Add an appropriate CSS class for styling
anchor.className += ' myCheckerBackground'
}, 3000);
And the CSS:
a.wanelo-save-button.myCheckerBackground{
height: 88px;
width: 101px;
background-repeat: no-repeat;
background-size: cover;
}
You'll notice that I used "setTimeout." This is due to a limitation on jsFiddle. In the production environment, you'll want to place your custom js file AFTER save.js loads, then in THAT file create a DOMContentLoaded listener to make sure the first Wanelo image has loaded before you modify it.
<a class="wanelo-save-button" href="//wanelo.com/">
<img src="whatever image you want here" alt="">
</a>
<script async="true" type="text/javascript" src="//cdn-saveit.wanelo.com/bookmarklet/3/save.js</script>
Works.
I am relatively new to js and for the life of me can not figure out the issue with this function. I am just trying to resize the div's width on a page resize. The css is also included in case that has anything to do with it.
<div id="lowerPattern"></div>
<script>
$( window ).bind("resize", function() {
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
</script>
/*CSS*/
#lowerPattern {
height: 99px;
width: 10px;
background-color: green;
/*Keeps div centered on resize*/
position: absolute;
left: 50%;
margin-left: -300px;
}
It's working fine for me: http://jsfiddle.net/kuaYV/
Have you made sure JQuery is loading properly? Also, try putting the function in $(document).ready() like so:
$(document).ready(function() {
$( window ).bind("resize", function(){
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
});
Edit: If it's still not working, it could be something to do with the parent element's CSS. Also make sure you don't have any other elements with the same id attribute on the page.
enclose your code inside $(document).ready(function(){}); like this:
$(document).ready(function()
{
$( window ).bind("resize", function(){
// Change the width of the div
$("#lowerPattern").css('width', '300px');
});
});
DO you know that you must load Jquery?
You must either put the jquery source code into a file and save it or download it everytime you run the website with a CDN(Contact Delivery network.)
Also you must load Jquery. Go to their site and download the source. Save to a textfile with the .js extension.
After that write
<script type="text/Javascript" src="MyJquery.js"></script>
in the head area of the HTML
The other option is to use a CDN and write:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
This will load the jquery to your website
you must put the code into
$(document).ready(function(){
//put all your code here
});
If you are using a CDN check your net connection. If the internet connection is lost it will not load the Jquery while you are trying to run
I'm wondering how can I put a div over every image element on the page using jQuery? I want to make it where when you right click on the image, you'll just be right clicking on a div and then it will be harder to save, and people that don't know HTML and stuff wont be able to get the image since they wont even know about "View page source" option. Can someone help?
Thanks in advance.
You can drop a new DIV on top of the images using absolute positioning:
.hider {
z-index: 1000;
position: absolute;
}
and this code:
$('img').each(function() {
var pos = $(this).position();
$('<div/>', {title: this.alt})
.addClass('hider')
.css({
width: this.width, height: this.height,
left: pos.left, top: pos.top,
})
.insertAfter(this);
});
See http://jsfiddle.net/alnitak/KRgnK/ for a working demo
EDIT updated to copy the original image's alt tag onto the overlay div.
If blocking the right-click on the image is important, I recommend a simple CSS approach where the image is just the background of a DIV. You cannot right-click to download these images regardless of any JavaScript.
As mentioned, you'll be missing the alt image attribute so proceed accordingly.
The HTML...
<div id="myImage"></div>
And the CSS...
<style>
#myImage {
background-image: url(theGraphic.jpg);
background-repeat: no-repeat;
width: 100px; /* theGraphic.jpg width */
height: 100px; /* theGraphic.jpg height */
}
</style>
To disable right click entirely, you can use jquery like so:
$(document).ready(function(){
$('img').bind("contextmenu",function(e){
return false;
});
});
try this:
$('body img').wrap('<div />');
Click Here
I have a div which is creating through ajax, i would like to disable the whole body once the div is popup and until, unless the div is closed.Is this possible in jquery. Please let me know your suggestion
Thanks,Praveen Jayapal
You want to REMOVE, or hide the body? Technically this shouldn't be possible because you need to append the div to the body in order to see it. What you could do is create a 'mask' layer that covers the WHOLE body, then use z-index for your div to display it on top of the body.
Something like:
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
might help!
To completely hide the page all you would need to do is change line 21:
$('#mask').fadeTo("slow",0.8);
in the javascript to:
$('#mask').fadeTo("slow",1);
and the color of the mask on line 7 of the CSS can be changed to whatever you want too:
background-color: #000;
That should do the trick..
HTML:
<body>
<div id="overlay">
this is above the body!
</div>
<!--...rest...-->
</body>
CSS:
#overlay {
background-color: #ccc; /*or semitransparent image*/
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#ajax-div {
z-index: 200; /*important, that it is above the overlay*/
}
Javascript:
<script type="text/javascript">
$(document).ready(function() {
//your ajax-call
$.ajax({
//on success
success: function() {
//your logic your showing the ajax-div
$('#overlay').show(); //or fadeIn()
}
})
//use live to catch the close-click of the later added ajax-div
$('#ajax-div a#close').live('click', function() {
//close the ajax-div
$(this).parent().hide();
//close the overlay
$('#overlay').hide(); //or, again, fadeOut()
});
});
</script>
What it sounds like you want is something known as a modal dialog box.
There are a number of JQuery scripts to achieve this quite easily. Here are some links for you:
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
http://plugins.jquery.com/project/modaldialog
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Hope that helps.
OK ... best idea is use jquey.ui if you use jquery.
http://jqueryui.com/demos/dialog/#modal
You can choose theme and download only components you like..
Then just include js and css a place img folder and call dialog. It is quiet easy...