I'm trying to put an .animate in a function to show more of an image when you hover over it. So far I only managed to roll down the entire div element, somehow I can't figure out how to talk to each individual image. This is what I have.
HTML:
<div class="social">
<img src="xxx" alt="xxx">
<img src="xxx" alt="xxx">
<img src="xxx" alt="xxx">
</div>
CSS:
.social{
position: fixed;
top: -91px;
right: 10%;
}
.social img{
width: 25px;
margin: 0 5px 0 0;
}
javaScript/jQuery (works if I change $('.social a img') to $('.social')):
$(document).ready(function () {
$('.social a img').hover(function ( ){
$(this).animate({top:'0px'});
});
});
Related
I have a scrolling image gallery as follows. The CSS lays out the images in a row that scrolls horizontally. Underneath, I have a row of the same images, but as thumbnails. I want to be able to click on a thumbnail, and scroll the correct image into view.
HTML:
<div class="images_container">
<img id="image_1" src="/image1.jpg">
<img id="image_2" src="/image2.jpg">
<img id="image_3" src="/image3.jpg">
</div>
<div class="images_container thumbnails">
<img src="/image1.jpg" class="thumbnail">
<img src="/image2.jpg" class="thumbnail">
<img src="/image3.jpg" class="thumbnail">
</div>
CSS:
.images_container {
overflow-x: scroll;
overflow-y: hidden;
max-height: 50rem;
white-space: nowrap;
}
.images_container.thumbnails {
max-height: 10rem;
}
.images_container img {
vertical-align: top;
height: 50rem;
}
.images_container.thumbnails img {
height: 10rem;
}
This works up to a point, but jumping to the id of the image is problematic. If the larger image is even a few pixels into the visible viewport, it can't 'jump' to it, as it seems to be technically on the screen.
Is there a way I can use Javascript to 'scroll' the whole image into view when I click on it's corresponding thumbnail? I don't have access to jQuery on this project, but am happy to use JavaScript to make this work.
You can try this , no change in CSS, i add an id in html and call to scrollTo function :
<script>
function scrollTo(image_id){
var topLeft = document.getElementById(image_id).offsetTop;
document.getElementById('container').scrollLeft = topLeft;
}
</script>
<div id="container" class="images_container">
<img id="image_1" src="/image1.jpg" height="500px" width="500px">
<img id="image_2" src="/image2.jpg" height="500px" width="500px">
<img id="image_3" src="/image3.jpg" height="500px" width="500px">
</div>
<div class="images_container thumbnails">
<img src="/image1.jpg" class="thumbnail" onclick="scrollIntoView('image_1')">
<img src="/image2.jpg" class="thumbnail" onclick="scrollIntoView('image_2')">
<img src="/image3.jpg" class="thumbnail" onclick="scrollIntoView('image_3')">
</div>
To keep DOM cleaner I got this solution which requires only adding js
var elms = document.getElementsByClassName("thumbnail");
for (var i = 0; i < elms.length; i++) {
elms[i].onclick = function(event) {
event.preventDefault();
event.stopPropagation();
var id = this.parentNode.href.substr(this.parentNode.href.lastIndexOf('/') + 2);
var v = document.getElementById(id).getBoundingClientRect().left;
document.getElementsByClassName("images_container")[0].scrollLeft += v;
}
}
See on jsfiddle
Here's my attempt at a no (well, minimal) JS solution to a scrolling gallery. You could, in fact, remove the Javascript all together if you replaced the .active class with the :target pseudo-selector, allowing you to click your thumbnails to do the scrolling. It's just easier for me to do it this way through a fiddle
function removeClass(element, className) {
var classes = element.className.split(' ');
var key = classes.findIndex(function(name) {
return name == className
});
classes.splice(key, 1);
element.className = classes.join(' ');
}
function addClass(element, className) {
var classes = element.className.split(' ');
classes.push(className);
element.className = classes.join(' ');
}
setInterval(function() {
var current = document.querySelector('.images .image.active');
var next = current.nextElementSibling;
if (!next) {
next = document.querySelector('.images .image:first-child');
}
removeClass(current, 'active');
addClass(next, 'active');
}, 1500);
body {
margin: 0;
padding: 0;
width: 500px;
height: 500px;
}
.images {
width: 100%;
height: 100%;
position: relative;
overflow-x: hidden;
}
.image {
width: 100%;
height: 100%;
top: 0px;
position: absolute;
left: -100%;
float: left;
transition: 1s;
}
.image.active {
left: 0%;
}
.image.active ~ .image {
left: 100%;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
<div class='images'>
<div class='image black active'></div>
<div class='image red'></div>
<div class='image blue'></div>
<div class='image yellow'></div>
</div>
Essentially the way it works is by making the div.images container a certain height and width, and therefore all images inside it can be positioned as you want. We initially set all .image to left: -100%, so that they're completely off screen to the left. We then set .image.active as left: 0 so that it's on screen. We then use the ~ selector to say that all siblings that come after the current (.image.current ~ .image) should be left: 100%, so completely to the right. Add in a transition, and you have a completely CSS scrolling gallery. The JS only acts as a way to change what the current active image is, and you can replace that with :target if you want.
I used div's, instead of img tags because it's easier to provide a POC with div's and background colors, but it's worked well with images in the past. Just put an <img> tag inside those <div class='image'></div> tags
New to Javascript here,
I've been trying to change the size of an image (width/height) in an HTML page whenever a mouseover occurs, however it doesn't seem to work if the styles are set in the CSS page, which is a huge problem for me since I need to use the position property to set the image location.
Here's the code.
HTML:
<a href="#" onMouseOver="big()" onMouseOut="small()">
<img src="img1.png" name="image1" id="mw">
</a>
CSS:
#mw
{
position:absolute;
left:15%;
top:35%;
width:146px;
height:97px;
}
jS:
function big()
{
document.getElementsByName("image1").style.width=183;
document.getElementsByName("image1").style.height=121;
}
function small()
{
document.getElementsByName("image1").style.width=146;
document.getElementsByName("image1").style.height=97;
}
Simple javascript version, style not required
var element = document.getElementsByName("image1")[0];
element.setAttribute('width', 146);
element.setAttribute('height', 97);
function big() {
element.setAttribute('width', 183);
element.setAttribute('height', 121);
}
function small() {
element.setAttribute('width', 146);
element.setAttribute('height', 97);
}
<a href="#" onMouseOver="big()" onMouseOut="small()">
<img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw">
</a>
You can solve it by CSS only. There is a :hover-pseudo class which gets activated once you hover a specific element. For your request, there is no need to use JavaScript.
#mw:hover {
width: 183px;
height: 121px;
}
What the above CSS snippet does is: "change width and height to respectively 183px and 121px if you hover an element with id mw".
Here below is an example of it. click on "Run code snippet" and try to hover the rubic image.
#mw {
position: absolute;
left: 15%;
top: 35%;
width: 146px;
height: 97px;
}
#mw:hover {
width: 183px;
height: 121px;
}
<a href="#">
<img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw">
</a>
Just do this:
a:hover {transform:scale(1.5,1.5);} <here you can set the x and y scaling
with JS you can:
document.getElement etc.addEventListener("your event", function(event){
event.target.style.transform = "scale(1.5,1.5)";
});
I have the following html structure
<div id="slide">
<div style=" position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;overflow:hidden;">
<div class='DS_Banners_Topo' id='DS_Banners_Topo_1'>
<a href='#' target='_self'><img alt='Slide1' src='http://www.dotstore.com.br/74446_salessuplementos/banners/slide1.jpg' /></a>
</div>
<div class='DS_Banners_Topo' id='DS_Banners_Topo_2'>
<a href='#' target='_self'><img alt='Slide2' src='http://www.dotstore.com.br/74446_salessuplementos/banners/slide2.jpg' /></a>
</div>
<div class='DS_Banners_Topo' id='DS_Banners_Topo_3'>
<a href='#' target='_self'><img alt='Slide3' src='http://www.dotstore.com.br/74446_salessuplementos/banners/slide3.jpg' /></a>
</div>
</div>
</div>
Need to turn this into a slide to change anything in their structure. Keeping your classes. Is it possible to do this in html structure of these?
DEMO CODE JSFiddle
If you don't want to change you structure, but can change the css, here is an example of what you could do:
CSS
#slide {
margin: 22px 0 0 0;
position: relative;
height:200px;
overflow: hidden;
}
#slide>div{
position: relative;
}
.DS_Banners_Topo{
position: absolute;
top:0;
width:100%;
overflow: hidden;
}
.DS_Banners_Topo img{
width:100%;
display: block;
}
JS
$(document).ready(function(){
//current slide index
var counter = 0,
slides = $('.DS_Banners_Topo');
//position slides
slides.each(function(i,e){ $(this).css('left',i-1+'00%'); });
//change slide every 1000ms
setInterval(function(){
counter = counter>slides.length-3 ? 0 : ++counter;
$('#slide>div').animate({'left':-counter+'00%'});
},1000);
});
JS Fiddle Demo
Note that I removed the unwanted inline styles for the div inside #slide
It would be possible to use jQuery or another library to easily rotate the visibility on each of these divs. Just Google jQuery Carousel and you'll find and endless amount of solutions to your issue. Most will preserve all existing classes.
I am creating a slide show in with help of Jquery as below.I am able to get the slide show .But I am not able to give the link to each slide using href
Plseae help me .
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.fade {
position: relative;
width: 650px;
height: 373px;
}
.fade img {
position: absolute;
left: 0;
top: 0;
width: 650px;
height: 373px;
}
</style>
<script>
$(function () {
$('.fade img:gt(0)').hide();
setInterval(function () {
$('.fade :first-child').fadeOut(3000)
.next('img').fadeIn(3000).end()
.appendTo('.fade');
}, 4000);
});
</script>
<div class="fade" style="width: 603px; height: 373px; z-index: 1; border-radius: 10px 10px 10px 10px; left: 295px; top: 224px; position: absolute">
<img src="images/SAM_0043.JPG" href="www.xyz.com" >
<img src="images/SAM_0047.JPG" href="www.xyz.com" >
<img src="images/SAM_0044.JPG" href="www.xyz.com" >
</div>
</body>
Try
<img src="images/SAM_0043.JPG" >
img tag has no href attribute.
wrap img tag with a tag n give href
Or with jQuery using your current code wrap a tag around img
fiddle Demo
$('div.fade img').wrap(function () {
return '';
});
embed the img tag into the anchor tag, and provide the href="" to the anchor tag. Your work is done.
href is not an img tag attribute so better to change the html to
<img src="" />
and if you dont want to change your html you can use code below to redirect to links on click on images
$(".fade img").bind('click',function(){
window.location = $(this).attr("href");
});
I just created a star rating system that change image on mouse over., but i cant seem to display the stars inline.
they get under each other.
It dosent work with style sheet so I suppose it should be re written in the javascript. !?
This is my JavaScript function.
html code :
<div id="star">
<div id="star_1" onclick="SendRating(1);" onmouseover="rateStar(1)" >
<img src="star2.png" id="rating_1" onclick="SendRating(this.getAttribute('score'));" alt="star_1" /></div>
<div id="star_2" onclick="SendRating(2);" onmouseover="rateStar(2)" >
<img src="star2.png" id="rating_2" onclick="SendRating(this.getAttribute('score'));" alt="star_2" /></div>
<div id="star_3" onclick="SendRating(3);" onmouseover="rateStar(3)" >
<img src="star2.png" id="rating_3" onclick="SendRating(this.getAttribute('score'));" alt="star_3" /></div>
<div id="star_4" onclick="SendRating(4);" onmouseover="rateStar(4)" >
<img src="star2.png" id="rating_4" onclick="SendRating(this.getAttribute('score'));" alt="star_4" /></div>
<div id="star_5" onclick="SendRating(5);" onmouseover="rateStar(5)" >
<img src="star2.png" id="rating_5" onclick="SendRating(this.getAttribute('score'));" alt="star_5" /></div>
<p id="ContentHolder">
</p>
</div>
JavaScript :
function rateStar(rating){
var i = 1;
var ratings = '';
for (i==1; i<=5; i++){
if (i<=rating){
document.getElementById('rating_'+i).src= 'star1.png';
}
else{
document.getElementById('rating_'+i).src= 'star.jpg';
}
}
}
and one of my divs
<div id="star_1" onclick="SendRating(1);" onmouseover="rateStar(1)" >
<img src="star.jpg" id="rating_1" onclick="SendRating(this.getAttribute('score'));" alt="star_1" /></div>
CSS
#star{
position:absolute;
color:#fff;
margin-top:100px;
margin-left:1000px;
display:inline block;
}
the mouse over function is working great except that it wont display inline =/
Thanks
Using display: inline-block; on your stars will fix the problem. You can do the whole hover effect using CSS without any Javascript.
Demo: http://jsfiddle.net/ThinkingStiff/5JPDX/
HTML:
<div id="stars">
<div id="star-1" class="star"></div>
<div id="star-2" class="star"></div>
<div id="star-3" class="star"></div>
<div id="star-4" class="star"></div>
<div id="star-5" class="star"></div>
</div>
CSS:
#stars {
background-image: url( http://thinkingstiff.com/images/star-empty.gif );
background-size: 20px 20px;
cursor: pointer;
height: 20px;
overflow: hidden;
position: relative;
width: 100px;
}
.star {
height: 20px;
position: absolute;
width: 100px;
}
.star:hover {
background-image: url( http://thinkingstiff.com/images/star-highlight.png );
background-size: 20px 20px;
}
#star-1 {
right: 80px;
z-index: 5;
}
#star-2 {
right: 60px;
z-index: 4;
}
#star-3 {
right: 40px;
z-index: 3;
}
#star-4 {
right: 20px;
z-index: 2;
}
#star-5 {
right: 0;
z-index: 1;
}
Script:
document.getElementById( 'stars' ).addEventListener( 'click', function ( event ) {
//SendRating( event.target.id.substr( -1 ) );
alert( event.target.id.substr( -1 ) );
}, false );
Output:
float:left; display:inline; or display:inline block; are all your friends when trying to display in a straight horizontal line. I won't suggest using a <TABLE> for this but it can be done that way.
Maybe you should post some more of your code or create a JSFiddle of your HTML/CSS/Javascript
Update:
Created this: http://jsfiddle.net/Uyr4P/
It's just a copy/paste of your HTML with a display:inline-block style added for DIVs to illustrate how it is all in one line.
You will instead probably want to place a rule on your outermost DIVs and control the display that way - alternatively, use SPANs instead of DIVs
DIV solution. Just use this with your current HTML:
DIV#star DIV
{
display:inline-block;
}
You should use CSS property "display" not on parent DIV, but on child ones, because it cannot be inherited. So, do something like this in CSS:
#star_1{display:inline block;}
#star_2{display:inline block;}
#star_3{display:inline block;}
#star_4{display:inline block;}
#star_5{display:inline block;}
or (better) declare CSS class for it