this is my code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#stopmusic").click(function(){
$("#musicbox").empty();
});
$("#playmusic").click(function(){
if ($('#musicbox').visible( true )) {
$('#musicbox').append('');
}
else {
$('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
}
});
});
</script>
</head>
<body>
<center>
<button id="playmusic">Play</button>
<button id="stopmusic">Stop</button><br>
<div id="musicbox">
<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />
</div>
</center>
</body>
</html>
The empty() is ok but the append() is not working. I want to remove the playlist from my website when the button "Stop" is clicked and show the playlist again when the button "Play" is clicked.
My previous code is not include the if/else so when I click "Play", the playlist appear another, another , another again but i want it appear 1 time and if i click "Stop", it's gone, if i click "Play", it's appear again.
Can anybody help? Please.
Instead of manipulating the inner HTML,
you could simply show / hide
$(document).ready(function(){
$("#stopmusic, #playmusic").click(function() {
$("#musicbox").toggle();
});
});
I'm not sure if your iframe contains playable video content (since you've used a pseudo src).
In the case you want to stop your iframe from playing:
$(function(){ // DOM ready shorthand
var $mBox = $("#musicbox");
var iframe = $("iframe")[0].outerHTML;
$("#stopmusic, #playmusic").click(function() {
$mBox.html( this.id==="stopmusic" ? "" : iframe );
});
});
Note that <center> tag is deprecated in HTML5.
jsBin demo
Isn't it $(SELECTOR).is(':visible') more appropriate ? There is no such a function $(SELECTOR).visible(true) in jQuery.
if ($('#musicbox').is(':visible') {
//do stuff
}
Try something like this:
$("#stopmusic").click(function(){
$("#musicbox").empty();
});
$("#playmusic").click(function(){
if ($('#musicbox iframe').length < 1) {
$('#musicbox').html('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
}
});
$("#stopmusic").click(function(){
$("#musicbox").empty();
});
$("#playmusic").click(function(){
if ($('#musicbox').html() == '') {
$('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
}
});
Here is the working example
$(document).ready(function() {
$("#stopmusic").click(function() {
$("#musicbox").empty();
});
$("#playmusic").click(function() {
$('#musicbox').html('<p>Test</p>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<button id="playmusic">Play</button>
<button id="stopmusic">Stop</button>
<br>
<div id="musicbox">
<p>Test</p>
</div>
</center>
Try this,
.......
$("#playmusic").click(function(){
if ($('#musicbox > iframe').length>0) {
$('#musicbox').append('');
}
else {
$('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
}
});
.........
Try with below updated script code
$(document).ready(function(){
$("#stopmusic").click(function(){
$("#musicbox").empty();
});
$("#playmusic").click(function(){
if ($('#musicbox iframe').is(':visible')) {
$('#musicbox').append('');
}
else {
$('#musicbox').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/flMDiQib1J4?list=PL7W4kY6q3mxsiAgJNh1BlEWGI3PXBUqju" frameborder="0" allowfullscreen></iframe>');
}
});
});
Related
I have a div with content ie. short-code, images, links etc.
I need my switch to toggle the div container without jquery. I have spend days and would really appreciate some assistance.
I have included the switch code. On off the div must be display.style="none"
html
<img id="switch" onclick="changeImage()" src="http://designplatform.byethost15.com/on.png" width="60" height="150">
JavaScript
<script>
function changeImage()
{
element=document.getElementById('switch');
if (element.src.match("off"))
{
element.src="http://designplatform.byethost15.com/on.png";
}
else
{
element.src="http://designplatform.byethost15.com/off.png";
}
}
</script>
You can accomplish this using jquery.
Add jquery to your html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Take out the onclick=changeImage() function from the <img> element, and add the following jquery(found in the first part of the snippett) into your <script> tags on your html.
$(function () {
$("#switch").click(function () {
if ( $("#switch").val()=="off")
{
$("#switch").attr("src","http://designplatform.byethost15.com/on.png");
$("#switch").val("on");
}
else
{
$("#switch").attr("src","http://designplatform.byethost15.com/off.png");
$("#switch").val("off");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="switch"
src="http://designplatform.byethost15.com/on.png" width="60" height="150">
The scroll bars on the iframe element is not showing when iframe element is hide and show it again.
CODE SNIPPET:
<iframe id="imageFrame" scrolling="yes" src="https://wallpaperscraft.com/image/the_legend_of_zelda_elf_shield_sky_link_22301_1280x1024.jpg" width="100" height="100">
</iframe>
<button id="hideFrame">
Hide Frame
</button>
<button id="showFrame">
Show Frame
</button>
$(document).ready(function() {
$("#hideFrame").click(function() {
$("#imageFrame").hide();
});
$("#showFrame").click(function() {
$("#imageFrame").show();
});
});
JSFIDDLE DEMO:
DEMO
Solution 1:
HTML:
<iframe id="imageFrame" scrolling="yes" src="https://wallpaperscraft.com/image/the_legend_of_zelda_elf_shield_sky_link_22301_1280x1024.jpg" width="100" height="100">
</iframe>
<button id="hideFrame">
Hide Frame
</button>
<button id="showFrame">
Show Frame
</button>
CSS:
.hide{visibility: hidden;position: absolute;}
.show{visibility: visible;}
jQuery:
$(document).ready(function() {
$("#hideFrame").click(function() {
$("#imageFrame").addClass('hide').removeClass('show');
});
$("#showFrame").click(function() {
$("#imageFrame").addClass('show').removeClass('hide');
});
});
Demo: https://jsfiddle.net/17knnLsb/7/
Solution 2:
HTML:
<div class="iframe-wrapper"></div>
<button id="hideFrame">
Hide Frame
</button>
<button id="showFrame">
Show Frame
</button>
jQuery:
var iframeMarkup = '<iframe id="imageFrame" scrolling="yes" src="https://wallpaperscraft.com/image/the_legend_of_zelda_elf_shield_sky_link_22301_1280x1024.jpg" width="100" height="100"></iframe>';
$(document).ready(function() {
$('.iframe-wrapper').append(iframeMarkup);
$("#hideFrame").click(function() {
$('.iframe-wrapper').find('iframe').remove();
});
$("#showFrame").click(function() {
$('.iframe-wrapper').append(iframeMarkup);
});
});
Demo: https://jsfiddle.net/17knnLsb/3/
First hello to all. I am relatively new to jquery and on a learning curve.
My script is this:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">
</script>
<script>
$(function () {
$('#content').find('#nav a').on('click', function (e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content2').load(page);
});
});
$(function() >{
$('#content').find('#nav a').click(function() {
$('#nav a').removeClass('selected');
$(this).addClass('selected');
});
});
</script
<div id="content">
<embed type="image/svg+xml" src="x.svg" />
<div id="svgfix">
<embed type="image/svg+xml" src="1.svg" />
<embed type="image/svg+xml" src="2.svg" />
<embed type="image/svg+xml" src="3.svg" />
<embed type="image/svg+xml" src="4.svg" />
<embed type="image/svg+xml" src="5.svg" />
<embed type="image/svg+xml" src="6.svg" />
</div>
<div id="nav">
<img type="image/svg+xml" src="1.svg" />
<img type="image/svg+xml" src="2.svg" />
<img type="image/svg+xml" src="3.svg" />
<img type="image/svg+xml" src="4.svg" />
<img type="image/svg+xml" src="5.svg" />
<img type="image/svg+xml" src="6.svg" />
</div>
</div>
<div id="content2"><h1></h1></div>
The script works well. The only problem i have, i want the first page to auto load and the first button to be on selected. I have tried to find a solution here and read trough the topics, but nothing has worked so fare.
The script should load on click trough the nav bar with the 6 pages and it does and each button will be selected. But i would like on first page load, to auto select the first button and autoload the first page.
I hope my question is understandable and thanks for your time and help in advance...
You can do something like this:
Create a function and call when the page is ready and on click event
$(function () {
function getPage(el){
var page = $(el).attr('href');
$('#content2').load(page);
$('#nav a').removeClass('selected');
$(el).addClass('selected');
}
getPage($('#nav a:first-child'));//get the first page
$('#nav a').on('click', function (e) {
e.preventDefault();
getPage($(this));
});
});
Trying to understand your question - maybe something like this?
$( document ).ready( function() {
var firstNav = $('#nav a').first();
var page = firstNav.attr('href');
$('#content2').load(page);
firstNav.addClass('selected');
}
Try triggering click on first link after you create the event listeners
$('#nav a').first().click()
Quick note about your find(). Since ID's must be unique on a page you can skip $('#content').find('#nav a') and just use $('#nav a')
This script below slides and rebuilds a div with a Youtube video when I press a button.
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#slide_up').click(function(){
$('#slidingDiv').slideToggle('', function (){
var obj = $(this);
if(obj.is(':hidden')){
obj.html( obj.html() );
}
});
});
});//]]>
<div style="display: block;" id="slidingDiv">
<iframe src="http://www.youtube.com/embed/r13a2VUTajU" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
</div>
<input value="Slide and rebuild" id="slide_up" type="button">
I want to use an image instead of a button.
How should I modify a script to run a slide function after I click on img?
Thanks ;)
<input value="Slide and rebuild" id="slide_up" type="image" src="yourimage.jpg">
This should work. Unless I didn't understand the question
You have to use the onclick attribute
<img src="your src" onclick="your javascript function" />
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>