I'm playing with shadowbox and I want to launch it when user's landing on the index page of my web site.
I can use the shadowbox like that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
<!-- Set paramètres pour le shadowbox (CSS, JS? . . .) -->
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
My Image
</body>
</html>
I tried to make a onload function but it doesn't work (I can't set the link to the picture on it?):
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {onPageLoad()});
window.onload = function(){
Shadowbox.init();
};
</script>
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Clemz</title>
<!-- Set paramètres pour le shadowbox (CSS, JS? . . .) -->
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// skip the automatic setup
skipSetup: true
});
window.onload = function() {
// open ASA the window loads
Shadowbox.open({
content: '<img src="image.png" alt="alt" />',
player: "html",
title: "Welcome dude",
height: 502,
width: 350
});
};
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Works proprely ;-)
Related
the window popup but video isn't playing.
it says ''The web page at file://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1 might be temporarily down or it may have moved permanently to a new web address.''
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/watch?v=Nlw5FnHGER4">play</a>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
</body>
</html>
when i am trying this with a image then it is working fine.
$(document).ready(function(){
$('.popup-youtube, .popup-vimeo').magnificPopup({
// disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
iframe:{
patterns:{
youtube:{
index: 'youtube.com',
id: 'v=',
src: 'https://www.youtube.com/embed/%id%'
},
},
srcAction:'iframe_src',
},
fixedContentPos: false
});
});
Declared src for iframe and it worked.
If you want the video in a popup/another window try this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
</body>
</html>
please note the movement of all script tags to under the head, the updated URL, and the removal of
<script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
if you want it embedded within the page (as an iframe) try:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
</head>
<body>
<iframe width="420" height="315" class= "popup" scr= "https://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1">play</iframe>
</body>
</html>
also reference this site, w3 schools, (here)
also try it out here (option 1), RIGHT CLICK on the link in STACK OVERFLOWS ENGINE in any other you can just click on it but stack overflow requires you to right click and say "open in new tab"
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
</body>
</html>
If I include all the lib jqwidgets/jqx-all.js
it works well, but if I use only the necessary files given in their example : https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm#demos/jqxdropdownlist/defaultfunctionality.htm
then the listing appears at the end of the html file and not just under the widget.
I tried to include all the necessary files, didn't succeed.
Any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait"
];
// Create a jqxDropDownList
$("#jqxWidget").jqxDropDownList({ source: source, placeHolder: "Select Item", width: 250, height: 30});
});
</script>
<br/>
<br/>
<div id='jqxWidget'>
</div>
<hr>
</div>
I figured out the problem
it was the old version that I used : jqwidgets-ver8.0.0.zip
jqwidgets-ver8.3.2.zip solved the issue
So always update to latest version...
I downloaded this jquery plugin: http://harshen.github.io/jquery-countdownTimer/
specifically to use the Reverse countdown to zero from time set to only minutes timer.
I am pretty sure I followed the instructions correctly but the plugin does not work. I have never used jQuery or plugins before, so I'm not sure if I am missing something or just doing something completely wrong (or both).
My Javascript test alert does run.
I will attach my code for you all to look at. Not sure if it has to do with my file paths, but I've attached an image of that as well. Please tell me what could be causing the problem and how to fix. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
And here is a picture of my project folder, containing the files:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="timer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="timer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="timer/CSS/jquery.countdownTimer.css"/>
<script type="text/javascript">
alert("working");
</script>
</head>
<body>
<script type="text/javascript">
alert("tester");
</script>
<div id="main"><span id="m_timer"></span></div>
<script type="text/javascript">
$(function()
{
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
})
</script>
</body>
</html>
$(document).ready(function()) is not working in my jsp.I have tried in many forms.
My code is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="scripts/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Success</title>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquerymin.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hiiii");
});
</script>
</head>
<body>
</body>
</html>
Try This... I have Tested, working fine....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Success</title>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hiiiiii.........");
});
</script>
</head>
<body>
</body>
</html>
$(Document).ready is works when loaded JQuery library.
For example:
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hello World!!!");
});
</script>
I got two files, one file called "TitleLinkCookie.html",when I click on some link are creates a cookie named "NewTitle" . with value innerHTML in our case, "Hello world php 1"/2/3.and is working well. The second file called "showCodePhp.html", it is needed to receive the cookie title and display it in h3 tag id="TitleField", innerHTML, from some reason it is not working as I want. Thanks for any help.
TitleLinkCookie.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<META NAME="Description" CONTENT="Guide,Tutorial">
<meta name="keywords" content="HTML,CSS,JavaScript, jQuery,Html5,Framework,php,photoshop,design" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Link guide</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<STYLE type="text/css">
a { color:red; margin:5px; cursor:pointer; }
a:hover { background:yellow; }?
</STYLE>
<script type="text/javascript">
$(document).ready(function() {
$('a').each(function() {
$(this).click(function() {
var varibaleTitle=$(this).html();
setCookie(varibaleTitle);
});
});
function setCookie(varibaleTitle){
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+1);
var NewTitle = varibaleTitle;
document.cookie = "NewTitle=" + NewTitle + ";path=/;expires=" + expireDate.toGMTString();
alert(varibaleTitle)};//end function setCookie
});// document ready
</script>
</head>
<body >
<p><a id="link1" href="showCodePhp.html" >Hello world php 1</a></p>
<p><a id="link2" href="showCodePhp.html" >Hello world php 2</a></p>
<p><a id="link3" href="showCodePhp.html" >Hello world php 3</a></p>
</body >
</html>
showCodePhp.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
<!--<script src="http://www.centerwow.com/gotemp/gotemptics.js" type="text/javascript"></script>-->
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<script type="text/javascript">
$(document).ready(function() {
function reedCookie() {
var str =document.cookie.split("=")[1];
var str2 = document.getElementById("TitleField").innerHTML;
if (document.cookie != "") {
str2 = "Your Title is : " + str;
}//end reedCookie
});// document ready
</script>
</head>
<body style="background: white; font-family: Helvetica">
<p>Back to Home</p>
<p><h3 id="TitleField"></h3>Title : </p>
<pre class="brush: php;">
<?
// Hello world in PHP
print("Hello World");
?>
</pre>
<body>
</html>
You stated that you need to change the innerHTML of the HTML element "TitleField" but actually you didn't set it!.
I modified you script to set it below :
<script type="text/javascript">
$(document).ready(function() {
function reedCookie() {
var str =document.cookie.split("=")[1];
var str2 = document.getElementById("TitleField").innerHTML;
if (document.cookie != "") {
$("#TitleField").html("Title :"+ str );
}//end reedCookie
});// document ready
</script>