How to insert jquery code into html? - javascript

The website that I am developing has banners, and when the site is viewed on mobile devices, the SWF banner doesn't show. In that case, I need to show an <img> tag, but the jQuery code doesn't work.
My template is something like this:
... (PHP + HTML code)
<script type=”text/javascript”>
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent)) {
</script>
... Show SWF banner
<script type=”text/javascript”>
}
else {
</script>
... Show GIF banner
<script type=”text/javascript”>
}
</script>
But it doesn't work. it shows up both of them instead.

You may need to do this:
Javascript/JQuery:
$(function() {
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent)) {
$("#img").show();
}else{
$("#swf_banner").show();
}
});
HTML:
<img id="img" src=".." style="display:none;"/>
<object id="swf_banner" width="400" height="50" data="bookmark.swf" style="display:none;"></object>

Related

Fire the plugin swipebox on load with links that include hash tag

html code:
<a id="image1" href="images/1.jpg" class="swipebox" title="My Caption">
<img src="images/1mini.jpg" alt="image" />
</a>
Js code for firing the pugin when user enters with link that ends with '#1'
<script type="text/javascript">
$(document).ready(function(){
if(window.location.hash == "#1") {
$( '#image1' ).swipebox();
}
});
</script>
I figured it out that the js code
$( '#image1' ).swipebox();
works only when I click on the image. But I need that during the page load it would be popuped already.
To open the swipebox on page load; could you please try with following code:
<script type="text/javascript">
$(document).ready(function(){
if(window.location.hash == "#1") {
$( '#image1' ).swipebox();
$( '#image1' ).click();//click the image programmatically
}
});
</script>

show a popup link after video play

I am working on this site the home page slider has an option with label Watch the video I have added the below codes to my templates for the video to work.
<script>
function videoshow()
{
document.getElementById("sliders-container").style.display="none";
document.getElementById("show-video").style.display="block";
document.getElementById("show-video").innerHTML="<span id='close-button' onclick='closevideo()'>close</span><video id='example_video_1' class='video-js vjs-default-skin' controls width='100%' data-setup='{}' autoplay><source src='http://constantin-entertainment.info/king/wp-content/themes/Avada/video/sample11.mp4' type='video/mp4' /><source src='http://video-js.zencoder.com/oceans-clip.webm' type='video/webm' /><source src='http://video-js.zencoder.com/oceans-clip.ogv' type='video/ogg' /><track kind='captions' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 --><track kind='subtitles' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 --><p class='vjs-no-js'>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href='http://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a></p> </video>";
}
function closevideo()
{
document.getElementById("show-video").style.display="none";
document.getElementById("show-video").innerHTML="";
document.getElementById("sliders-container").style.display="block";
}
</script>
and the below div for the video to show
<div id="show-video">
</div>
and called the below files also
<link href="<?php bloginfo('template_directory'); ?>/css/video-js.css" rel="stylesheet" type="text/css">
<script src="<?php bloginfo('template_directory'); ?>/js/video.js"></script>
the videos are playing firn in all browsers.Now I would like a box to hover out like "Contact Me" with a link to my contact form.so I searched over net and applied the following code
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
Conatct Me
};
</script>
but didnt help. Not sure where I have gone wrong.
i think your are writing wrong syntax.
code should be like that
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function () {
$('Conatct Me').appendTo('#example_video_1');
};
</script>
I would user JQuery for that, just download the js files and then include them in ur file with:
<script src="[path]"></script>
now you can do this:
<script>
window.onload = function(){
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
$('#contact').html('Conatct Me');
}
}
</script>
if this dont works pleas write the JS error as comment.
EDIT:
Totaly forgot about that you can also change the text in the DIV without any JQuery:
<script>
document.getElementById('contact').innerHTML = 'Conatct Me';
</script>

how to show lightbox popup with image?

In the following code. After save button clicked it is asking for download the output image generated from Html2canvas. How to chage this code so that instaed of asking to download it will generate the image on the fly with 'lightbox' feature.
I tried as :
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script>
<script type="text/javascript">
$(window).load(function() {
$('#load').click(function() {
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
});
});
</script>
</head>
<body>
<div id="testdiv">
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<br/>
</div>
<input type="button" value="Save" id="load"/>
</body>
</html>
Instead of redirecting the visitor to the image like you do here:
window.location.href = img;
You can add an invisible (display: none) image to the page:
<img src="" id="image" style="display: none; position: absolute; top: 30%; left: 30%; z-index: 1000;" />
And show it with your canvas image data like so:
$('#image').attr('src', img).fadeIn(200);
Now this won't create a very interesting lightbox without some additional work, but for that I would suggest you use a plugin instead. Something like Slimbox or Fancybox.
You can try
$("#containerID").empty().append(canvas); // containerID is the container element for your rendered image
to append image on your page. And in the same way try giving canvas or img (in your case) as url to your lightbox code.

How to lazy load Facebook's Like Box?

I have found a tutorial for lazy loading Facebook's like box, but it's appropriate only if you use one FB widget on a page.
How would it look like if you want to load "like button" normally, but would like to lazy load "like box", i. e. load it only if the user scrolls and like box is in the viewport?
Also, is it possible to do it without any plugins nad possibly without jquery, i. e. using only pure javascript?
Here is the mentioned code:
/**
* check if facebookHolder is in viewport, and then load Like Box widget
*/
$(document).ready(function() {
function checkScrollingForWidget(event) {
$('#facebookHolder:in-viewport').each(function() {
$('#facebookHolder').append('<div id="fb-root"></div>');
$('#facebookHolder').append('<fb:like-box href="http://www.facebook.com/forexagone" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
FB.init({status: true, cookie: true, xfbml: true});
});
$(window).unbind('scroll', checkScrollingForWidget);
}
$(window).bind('scroll', checkScrollingForWidget);
});
Since Facebook's like box is so widely used and can slow down page loading a bit (even if it's async.), I was quite surprised to see that there are no newer tutorials how to do this. Is it possible at all?
Thank you in advance for your ideas.
This is Markus' code in a simple HTML document:
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy Load</title>
<script src="http://code.jquery.com/jquery-git.js" type="text/javascript"></script>
<script src="http://www.appelsiini.net/download/jquery.viewport.js" type="text/javascript"></script>
<style type="text/css">
.facebookHolder {
height: 50px;
background: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
</script>
</head>
<body>
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
</body></html>
You can add a Facebook widget any time dynamically, but you need call FB.XFBML.parse after adding it to the DOM.
This could be inteteresting for me too so I just fixed the tutorial script:
JSFiddle
Of course you need to import jquery and the viewport plugin (if you want to use it).
<script src="jquery.js"></script>
<script src="jquery.viewport.js"></script>
Then include fbroot tag only once and give the holders an specific data-url attribute because loading one url multiple times doesn't seem to be possible. Late we will read out this data-attribute.
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
Then use the following jQuery code:
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});

Why don't auto height work on images?

What I am trying to accomplish is that, when you put an image on 100% it nicely scales the height accordingly. I like to catch that height and process it.
<div id="view" style="width:950px;">
<img src="1.png" />
</div>
The image is 950x500pixels. However when I ask the view $( '#view' ).height() what the height is, it returns 16pixels. Does anyone know why it does this? Why doesn't it return 500pixels as that's the size of the image.
You need image to be loaded first. Try this:
<!DOCTYPE HTML>
<html>
<style>
div { width: 950px; }
img { width: 100%; }
</style>
<body>
<div>
<img src="1.png">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$('img').load(function() {
var height = $('div').height();
console.log(height);
});
</script>
</body>
</html>
I have test to alert the size of <Div> It's return the valid value, that return the size of image.
But from your code $( 'view' ).height() I have change to $( '#view' ).height();
Here is my code it's return correctly.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function loaded() {
var height = $( '#view' ).height();
alert(height);
}
</script>
</head>
<body onload="loaded();">
<div id="view" style="width:950px;">
<img src="Desert.jpg" />
</div>
</body>
</html>
Please do not use local image, you can use an image with URL, like "http://www.veryued.org/wp-content/uploads/2012/02/less-online.png".
Please read jQuery API carefully:
Caveats of the load event when used with images:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache

Categories

Resources