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");
}
Related
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
I'm quite new to using the fullpage.js pluging and am using it for my portfolio site. The landing page uses the fullpage plugin and shows a couple of images of projects. I would like these background images to be links to different pages. Is there a way to achieve this? I've looked all over the place, but can't seem to find an answer.
Thanks!
You can't turn a background image into a link, but you can turn an element into one with a click handler and you can give that element a background image.
<div id="myDiv">
</div>
<style>
#myDiv {
background-image: url(http://i.imgur.com/xKUoV94.png);
height: 300px;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(function () {
$('#myDiv').click(function () {
window.location.href = 'http://google.com';
});
});
</script>
http://codepen.io/Chevex/pen/NGKaPr
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'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/
try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO
jQuery rules. Check this out.
http://api.jquery.com/resize/
The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)
I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}
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...