I am developing a website (using php, html and css). I have a page for "news and events" which contains list of urls. What I want to do is on mouse-over over a link, a small miniature of the corresponding website should be loaded in a div, so that the user knows what type of news the link contains.
I have tried code on mouse-over for images and videos, but unable to do the same for webpage.
For image :
Happy Birthday<br /> <div id="loadarea" style="width: 600px"></div>
For Video :
<a onClick="document.getElementById('dynloadarea').innerHTML='<iframe src=\'osmosis.mpg\' width=\'300\' height=\'300\' scrolling=\'auto\' frameborder=\'0\'></iframe>'"> Osmosis</a> <div id="dynloadarea"></div>
-Thanks in advance !
use blockUI
examples are here :
http://jquery.malsup.com/block/#demos
try this:
$('a').hover(function(){
var imgpath = $(this).attr('href');
$('#loadarea').load(imgpath)
}, function(){
$('#loadarea').empty()
})
You will need jQuery .load().
$('a').hover(function(){
var path = $(this).attr('href');//Get the path
$('#result').load(path);//Load contents into a div#result
, function() {
$('#result').show();
}
});
$('a').mouseout(function(){
$('#result').hide();
});
You will only be able to load pages on the same server.
$(document).ready(function(){
$('#a').mouseover(function(){
$('#page').css('visibility','visible');
$('#ss').attr('src',"http://www.w3schools.com/css/default.asp");
});
$('#a').mouseout(function(){
$('#page').css('visibility','hidden');
});
});
Happy Birthday<br />
<div id="page">
<iframe width="300" height="300" scrolling="auto" id="ss">
</iframe>
</div>
Try this.
<p id="p3">Apple</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">
<script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>
<script type="text/javascript">
$(function () {
$('#p3 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'pageload' });
});
</script>
Related
I'm trying to hide images without the src in WordPress.
Following is the image code displaying on the front end
<img src="[custom-gallery-image-01]" class="galimage" height="300" width="580"/>
JS used to hide the image
<script type="text/javascript">
$(document).ready(function() {
$(".galimage").each(function() {
var atr = $(this).attr("src");
if(atr == "") {
$(this).addClass("hidegalimage");
} else {
$(this).removeClass("hidegalimage");
}
});
});
</script>
CSS
.hidegalimage {
display:none;
}
But I can still see the broken image icon & an image border. View JSFiddle. Can someone fix my issue or give me a suggestion how to hide the image?
Many thanks
Much more elegant to use CSS instead, no Javascript required, assuming the bad srcs start with [ as in your HTML: are empty strings:
.galimage[src=""] {
display:none;
}
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>
<img src="" class="galimage" height="300" width="580"/>
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>
Using jquery
$("img").error(function(){
$(this).hide();
});
Or
$("img").error(function (){
$(this).hide();
// or $(this).css({'display','none'});
});
no need for CSS alternative
You can use this but this is not hidding its removing from the page at all (DOM):
<img id='any' src="https://invalid.com" onerror="document.getElementById(this.id).remove()" >
I require to load a map to my page. I have the URL for that which is :
https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en
if I paste the above url, I am getting the map loaded in the browser.
Same way I am trying to load this map in to my web page. But nothing loads..
what is the correct way to load the above map in to my web page?
Here is my try:
$(function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").load(mapURL);
});
Live Demo
Url is not directly load on div .So you can append iframe on div like this to load map.
$(function() {
var html = '<iframe src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en"></iframe>';
$("#map").append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'><map>
<div id='map1'><map>
Or If you don't want to use iframe you cane use embed tag.
var html='<embed src="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width=200 height=200 />';
$("#map").append(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'></div>
You can trigger DIV load Event
HTML iframe Tag
The tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
$(function(){
$('div[onload]').trigger('onload');
});
function displayMap() {
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").append("<iframe src=" + mapURL +"></iframe>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div onload="displayMap()" id ="map"></div>
You can display your map without iframe
HTML object Tag
The tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
<div>
<object type="text/html" data="https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en" width="800px" height="300px" style="overflow:auto;border:1px solid">
</object>
</div>
Difference between and tag
Try this,
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<iframe src="'+mapURL+'" height="450" width="600"></iframe>');
});
OR
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<object data="'+mapURL+'" width="600" height="450" type="text/html">Loading Map</object>');
});
OR
$(window).on('load', function(){
var mapURL = "https://servicepoints.dhlecommerce.com/?lnglat=3.16327,101.69507&language=en";
$("#map").html('<embed id="map" src="'+mapURL+'" width=600 height=450 />');
});
$("#button").click(function(){
$(document).ready(function() {
$('#wrapper').load('page.php');
});
});
<div id="wrapper"></div>
<div id="button">click me</div>
I want show loading before send (load) page.php after click #button
Here is the jsfiddle script https://jsfiddle.net/1uwopptv/ or inline script assuming this is what you want. You can again hide the loading gif, after request is completed.
$("#button").click(function(){
$('#img').show();
$('#button').hide();
$(document).ready(function() {
$('#wrapper').load('page.php');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>
<div id="button">click me</div>
<img src="https://loading.io/assets/img/landing/curved-bars.svg" id="img" style="display:none"/ >
Disclaimer : Image used belongs to site loading.io, as came up in first google search.
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
I have a number of names in a list like so:
<div class="names">
<ul>
<li>name1</li>
<li>name2</li>
<li>name3</li>
<li>name4</li>
<li>name5</li>
</ul>
</div>
I would like to display next to the cursor an image thumbnail which relates to each name on mouse hover. Is this possible with jquery?
Thanks heaps. Pia
Here is a basic implementation of hover popup:
$('.names a').on('mouseenter', function(evt){
$('.popup').css({left: evt.pageX+30, top: evt.pageY-15}).show();
$(this).on('mouseleave', function(){
$('.popup').hide();
});
});
http://jsfiddle.net/CaQUY/
You can alter contents of the popup based on which element is hovered (for example, by using http://api.jquery.com/jQuery.data/ )
Example of using data attribute: http://jsfiddle.net/CaQUY/1/
Here is a javascript solution to show image thumbnail on hover.
<p id="p1">Cnet</p>
<p id="p2">Codegena</p>
<p id="p3">Apple</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">
<script type="text/javascript">
$(function() {
$('#p1 a').miniPreview({ prefetch: 'pageload' });
$('#p2 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'none' });
});
</script> <script src="https://codegena.com/assets/js/image-preview-for-link.js"></script>
If you want to know more on how to use it visit "Show image thumbnail on hover"