@public #js #javascript #hover #image #jquery

This is how to change an Image src on Mouse hover with jQuery

HTML

<img src="url1.jpg" data-alt-src="url-2.jpg" class="hover_images"/>
...
<img src="url3.jpg" data-alt-src="url-4.jpg" class="hover_images"/>
...
<img src="url5.jpg" data-alt-src="url-6.jpg" class="hover_images"/>

Javascript

$('.hover_images').hover(function(){
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
});
/** Big Thank to http://stackoverflow.com/a/17507894 **/

Here is a demo

@public #ipad #iphone #ios #safari #reload #backstep #backbutton

Forces a Page reload on mobile Safari if User is going back in browser history

/*! Reloads on every visit in mobile safari */
if ((/iphone|ipod|ipad/gi).test(navigator.appVersion)) {
    window.onpageshow = function(evt) {
        if (evt.persisted) {
            document.body.style.display = "none";
            location.reload();
        }
    };
}
/** Big Thanks to http://stackoverflow.com/questions/24046/the-safari-back-button-problem **/

@public #jquery #javascript #js #next #children

How to find next() button is not disabled, if those are not on the same level

HTML

<div><input rel="first" type="radio" name="x" value="1"></div>
 …
<div><input type="radio" name="x" value="2" disabled></div>
 …
<div><input type="radio" name="x" value="3" disabled></div>
 …
<div><input type="radio" name="x" value="4"></div>

Javascript

$('input[rel="first"]').parent().nextAll('label').children('input').not(':disabled')

/** Big Thanks to http://stackoverflow.com/a/24675347/2099411 **/

Remove disabled select options on iOS devices from DOM to handle mobile safari issues with disabled select options

if(navigator.userAgent.match(/(iPad|iPhone|iPod touch)/i) 
   && !navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i)){
     $('select.your_special_class option[disabled]').remove();
}

@public #iphone #ipad #js #javasript #target #userAgent #match

Auf diese Weise lassen sich granulare Browserversionen unterscheiden und differenzierte Javasript Aufrufe ausführen.

if/else Kurzschreibweise in JavaScript

/** normale lange Schreibweise **/
if(omv){
  $('select option[value="x"]').remove();
}else{
  $('select option[value="x"]').attr('disabled','disabled');
}

/** wesentlich kürzere Schreibweise **/
omv ? $('select option[value="x"]').remove() : $('select option[value="x"]').attr('disabled','disabled');

@public #javascript #js #if #kurz #jquery

jQuery: how to check if file exists

var base='http://mizine.de';
var url='/image_path_to_test.jpg';
var fallback_url='/image_path_exists_for_fallback_image.jpg';

/** Asynchronous!!! **/
$.get(base+url).done(function(){
  $('#any_DOM_id').append('<img id="my_image" src="'+url+'"/>');
}).fail(function(){
  $('#any_DOM_id').append('<img id="my_image" src="'+fallback_url+'"/>');
});

@public #jquery #js #javascript #file #exist #test

Hint: $.get() is asynchronous, so this way 'll kill the sequential chronology of your script execution

Projects

Tags

Capsule Servers

Lost connection to server.