Develop Reference

Image Transition on `onmouseover`

I am using this code to change from one image to another:
<img title="Hello" src="selfie.jpg" onmouseover="this.src='hero_image.png'" onmouseout="this.src='selfie.jpg'" />
I need help with the code so I can slow the transition from one image to the next.

The ideal solution to this would be rendering the two images and changing their opacity instead of changing src for the same tag. Something like :
<div id="container">
<img class="bottom" src="hero_image.png" />
<img class="top" src="selfie.svg" />
</div>
Once you are playing with the opacity, the transition effect can be applied using the following CSS :
#container img {
position:absolute;
left:0;
transition: opacity 1s ease-in-out;
}
#container img.top:hover {
opacity:0;
}

I want to resize certain images on my site ONLY on mobile

On the website I have I can only input code into the body and the footer.
The website is bothellhomes.com. The homepage shows three round images. On a mobile device, I want to resize the images so they show horizontally. Right now, since the images are so large, they go vertically.
Body code:
<section class="three-widgets">
<ul class="small-block-grid-1 medium-block-grid-3 text-center">
<li><a title="Advanced Search" href="/search/advanced_search/"><img src="https://u.realgeeks.media/lookinwa/advancedsearch.png" alt="Advanced Search" width="300" height="300" /></a></li>
<li><a title="Interactive Map Search" href="/map_search/results/9k/1/#/?city=Kenmore&city=Bothell&city=Kirkland&city=Woodinville&city=Bellevue&city=Lynnwood&city=Mill%20Creek&city=Redmond&page=1&list_price_max=800000&per_page=100&type=res&type=con&list_price_min=250000"><img src="https://u.realgeeks.media/lookinwa/mapsearch.png" alt="Interactive Map Search" width="300" height="300" /></a></li>
<li><a title="What's My Home Worth?" href="/cma/property-valuation/"><img src="https://u.realgeeks.media/lookinwa/homevaluation.png" alt="Home Value" width="300" height="300" /></a></li>
</ul>
</section>
Footer code:
<script>// <![CDATA[
document.write("<style>.three-widgets {margin-top: -60px;}.three-widgets img {background: #fff;border: 1px solid #ddd;border-radius: 100%;padding: 5px;}.three-widgets p {color: #000}.three-widgets li img { opacity: .9;-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.three-widgets li:hover img {border: 1px solid #444444;opacity: 1; -webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}#media (max-width:767px) {.three-widgets { margin-top: 0}}h1{ line-height:38px!important}</style>");
// ]]></script>

You should think mobile first. Apply styles to the images for the mobile version, and then override them using media queries for the desktop viewing.
You will likely want to add an ID or class to target strictly the desired images. In this case I added an id called round-images. Remove the classes "small-block-grid-1" and "medium-block-grid-3".
Body Code:
<section class="three-widgets" id="round-images">
<ul class="text-center">
<li><a title="Advanced Search" href="/search/advanced_search/"><img src="https://u.realgeeks.media/lookinwa/advancedsearch.png" alt="Advanced Search" width="300" height="300" /></a></li>
<li><a title="Interactive Map Search" href="/map_search/results/9k/1/#/?city=Kenmore&city=Bothell&city=Kirkland&city=Woodinville&city=Bellevue&city=Lynnwood&city=Mill%20Creek&city=Redmond&page=1&list_price_max=800000&per_page=100&type=res&type=con&list_price_min=250000"><img src="https://u.realgeeks.media/lookinwa/mapsearch.png" alt="Interactive Map Search" width="300" height="300" /></a></li>
<li><a title="What's My Home Worth?" href="/cma/property-valuation/"><img src="https://u.realgeeks.media/lookinwa/homevaluation.png" alt="Home Value" width="300" height="300" /></a></li>
</ul>
</section>
Next, style the images as you want for mobile using CSS. Since you don't have access to the header, you can get around that limitation through inline CSS or as I show below with embedded CSS. Lastly, add a media query to reset the styles how you had them before. Here is the idea:
<style>
/* the following controls image size */
#round-images img{
max-width:100px;
max-height:100px;
};
#media (min-width: 768px) {
#round-images img{
max-width:300px;
max-height:300px;
};
}
/* the following will remove the vertical stacking */
#round-images ul li{
float:left;
width:33%;
};
</style>
I got this working without your classes "small-block-grid-1 medium-block-grid-3".

Not sure why you cannot use css. But it seems like you cannot so you can use inline styles to just float them next to each other. Keep in mind that it will become really small images the smaller the screen size is.
<li style="float:left;width="30%">
put this style on all the < li > elements. and the middle one should perhaps have 5% margin on each side to prevent the image edges from touching each other.
<li style="float:left;width="30%;margin:0 5%;">
You also need to remove the height of the image and only set the width of the image to 100% so it will stretch to the edge of it's container which is the li.
You can of course do the same with css by giving the li's a class and floating them left.

jQuery - once item is clicked, grab data-item for li and apply a strike through to text in li (animate?)

I have a bunch of images that correspond to a list containing their names.
When the image is clicked it fades out the image then using data-item finds its corresponding name on the list and then crosses it out in red and changes the list item word to grey. I have code but it is not working or throwing any errors in console. I am new to jQuery.
How would I connect the clicked image with the correct list name and then change the font color to grey and give it a different color (red) strike through? I'd love to animate the strike through but that may be too involved. Advice is welcome :)
Any help is appreciated!
Here is a snippet of the code:
CSS
.stroked {
text-decoration: line-through;
color: red;
}
.found {
color: #282828!important;
}
HTML
<!--image items-->
<div class="picItem" data-item="Dart">
<img src="Dart.png" />
</div>
<div class="picItem" data-item="Dice">
<img src="Dice.png" />
</div>
<div class="itemWrapper">
<ul class="itemList">
<li class="olive">Olive</li>
<li class="dart">Dart</li>
<li class="dice">Dice</li>
</ul>
</div>
<!-- /itemWrapper -->
JS
// Handle the picture item clicks
$('.picItem').on('click', function () {
//grab appropriate list item view data-item for strikeThrough function
strikeThrough($(this).data('item'));
$(this).fadeOut(400, function () {
});
});
function strikeThrough() {
if ($('.itemList li').hasClass('stroked')) {
return;
} else {
$(this).addClass('stroked');
$(this).addClass('found');
}
}

You need to add arg in the strikeThrough function definition
You cannot use this object as the function is called on window scope, so the this would be referring to window object inside strikeThrough function. You could use .call or .apply to set the scope, but I don't see a need for it.
Changed the data-item to match the class name of the each li
PS: Your question and your code speaks differently, so check out the demo and let me know your comments.
// Handle the picture item clicks
$('.picItem').on('click', function() {
//grab appropriate list item view data-item for strikeThrough function
strikeThrough($(this).data('item'));
$(this).fadeOut(400, function() {});
});
function strikeThrough(item) {
var $item = $('.itemList li.' + item);
if ($item.hasClass('stroked')) { //already stroked
return;
} else {
$item.addClass('stroked').prepend('<span class="linethrough"> </span>').find('span').css('width', $item.width()).addClass('movein');
}
}
.stroked {
color: #282828;
position: relative;
}
.linethrough {
position: absolute;
height: 10px;
left: -200px;
top: 0;
text-decoration: line-through;
white-space: pre;
color: red;
-webkit-transition: left 1s ease;
-moz-transition: left 1s ease;
-o-transition: left 1s ease;
-ms-transition: left 1s ease;
transition: left 1s ease;
}
.linethrough.movein {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="picItem" data-item="dart">
<img src="Dart.png" alt="Dart" />
</div>
<div class="picItem" data-item="dice">
<img src="Dice.png" alt="Dice" />
</div>
<div class="itemWrapper">
<ul class="itemList">
<li class="olive">Olive</li>
<li class="dart">Dart</li>
<li class="dice">Dice</li>
</ul>
</div>

The argument you passed through on the top will also have to be defined as a parameter of your strikeThrough() function so you can make use of that when defining which element to strike through.
So replace your strikeThrough() function like this:
function strikeThrough(obj) {
$('.itemList li').each(function() {
if ($(this).text() == obj)
$(this).addClass('stroked').addClass('found');
});
}
Here is a demo: http://jsfiddle.net/ph5z3pwx/
For the strikethrough effect, have a look into this question: How do I animate a strike through effect using JavaScript on a piece of text?

Scrolling through pictures

Hello there Stackoverflow.
I have a little job for my website i can't figure out on my own.
I have a box on the right, where i want all my sponsors, but instead of making the box really long, i just want a simple "slideshow" where it just fades into a picture, it stays for 3 seconds, and it fades into another picture. They're gonna be 90x90 most of them, however some may be different sizes and that shouldn't screw up.
I have a picture demonstrating, if you didn't get the concept from my poor english.
http://imgur.com/oPausP2
1=The sponsor picture. At this box it should slide between the different sponsors.
thanks in advance!

I use this on my company's home page. Here's a codepen for it. I like using CSS whenever possible and minimize the javascript.
The DOM:
<div class="slides_container">
<div class="slide"><img src="img1.jpg"></div>
<div class="slide"><img src="img2.jpg"></div>
<div class="slide"><img src="img3.jpg"></div>
<div class="slide"><img src="img4.jpg"></div>
<div class="slide"><img src="img5.jpg"></div>
</div>
The CSS: Use the transition property to fade in and out. (Remember, you need to use vendor prefixes on transition to work with various browsers.)
.slides_container {
height:90px;
width:90px;
overflow:hidden;
position:relative;
}
.slides_container .slide {
position:absolute;
visibility:hidden;
opacity:0;
transition:opacity 1s ease, visibility 0s ease 1s;
}
.slides_container .slide.active {
visibility:visible;
opacity:1;
transition:opacity 1s ease;
}
The Javascript: This can be done without jQuery, but I'll use it here:
jQuery(document).ready(function($){
/*make sure the first element shows up*/
$('.slides_container .slide:first-child').addClass("active");
var active_slide = 0,
dom_slides = $('.slides_container .slide'),
num_slides = dom_slides.length,
myInterval = setInterval(function(){
if(active_slide>(num_slides*5+1))
clearInterval(myInterval);
changeSlide(++active_slide);
},6000);
function changeSlide(slide) {
if((slide = slide%num_slides)<0) slide+=num_slides;
dom_slides.removeClass('active').eq(slide).addClass('active');
}
});
(On my code, I added if(active_slide>(num_slides*5+1)) clearInterval(myInterval); That just stops the rotation after 5 cycles - so it's not just running forever. You can just delete those two lines if you want it to be infinite.)
Okay, explanation:
The CSS will apply visibility:hidden; opacity:0; to all of the .slide DOM elements. On .active state, the opacity transitions from 0 to 1 for 1 second (transition:opacity 1s ease;). Remember when .active state goes away, you need to delay the visibility for 1s so the opacity can transition, hence the visibility 0s ease 1s;.
In the Javascript, num_slides will count the number of .slide DOM elements; That variable will later be used with a modulo (%): slide % num_slides returns a whole number from 0 to the number of slides minus 1. We'll later use jQuery's .eq() method to select each DOM element in turn and apply the .active class to it.

Try something like this, do not forget you need the jquery library. DEMO working jsfiddle example with images from google.
Html:
<img src="" id="current" alt="" />
<ul class="slider">
<li><img src="http://p4.storage.canalblog.com/49/16/976515/75966520.gif" alt="" /></li>
<li><img src="http://www.graycon.com/wp-content/uploads/2013/01/Sponsor-Logos4.jpg" alt="" /></li>
<li><img src="http://forum.mmaglobal.com/files/mobilemarketingforum.com/Image/SponsorFooter_SanDiego_v9_2.jpg" alt="" /></li>
</ul>
Css:
ul.slider { display: none; }
jQuery:
<script src="/libraries/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var idx = 0;
var interval = 3000;
var images = $('ul.slider li img');
setInterval(function(){
idx++;
$('img#current').fadeOut(function () {
$(this).attr('src', $(images[idx%images.length]).attr('src')).fadeIn()
});
}, interval);
});
</script>

I'd recommend you to use a jquery slider. I have experience with jquery.cycle. It has many features and it's easy to install
http://jquery.malsup.com/cycle2/

JavaScript style.height shaking unintentionally

http://stadskoll.nu/restaurang.php
If you press the string of text called Visa/dölj mer information which is in a grey font, you will see that the effect occurring is shaking. This is not intentional and I cant figure out what's wrong.
To clarify, I want to know what's causing this "shaky" effect and be able to remove it.
HTML :
<!--VAL1-->
<div id="val1">
<div id="information">
<namn>
</namn>
<br>
<a id="funktion" onclick="toggle('val1');toggleoff_val1('val1');">visa/dölj mer information</a>
<br>
<div id="star2" style="background-position:0 -0px">
<div id="stars1">
<div class="first" onmouseover="starmove('-32px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','1');succes()"></div>
<div class="first" onmouseover="starmove('-64px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','2');succes()"></div>
<div class="first" onmouseover="starmove('-96px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','3');succes()"></div>
<div class="first" onmouseover="starmove('-128px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','4');succes()"></div>
<div class="first" onmouseover="starmove('-160px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','5');succes()"></div>
</div>
</div>
<div id="txt"></div>
<br>
<br>
<information></information>
</div>
<div id="bilder">
<img src="" />
<br/>
<img src="http://stadskoll.nu/bilder/karta.jpg" />
</div>
</div>
CSS :
#val1 {
width:83%;
height:75px;
border-top:1px;
border-top-style:groove;
margin-left:40px;
overflow:hidden;
padding-top:10px;
padding-left:20px;
-webkit-transition: all 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
-o-transition: all 0.5s ease-in-out; /* Opera */
}
JavaScript :
<script>
function toggle(id) {
var e = document.getElementById(id);
if(e.style.height == '175px')
e.style.height = '75px';
else
e.style.height = '175px';
}
</script>

The issue appears to be with the display:inline on the maincontentbox.
If you add vertical-align:top it will disappear.
What I believe is happening is that, since by default it is aligned to the baseline, the browser is making the div taller. Since the div is taller it has to resize the parent container and then move the div to the bottom of the line.