i am working in DOM i want to run marquee on header through given below library. this is my error below. Please help me out. theres an error of $ which is not defined according code but I have already defined. The marquee is actually not working on Mac Safari browser.
Error:$ is not defined
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://rawgithub.com/aamirafridi/jQuery.Marquee/master/jquery.marquee.min.js"></script>
<div onclick="myfunction()" class="marquee" style="width: 300px; overflow: hidden;">
<script>
function myfunction(){
$('#marquee').marquee();
}
</script>
the library is already included of jquery.
You are calling the <div class='marquee'> element by using a id selector $("#marquee").
Try using $(".marquee") instead.
More info about jQuery selectors
This worked for me with some corrections as said above.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://rawgithub.com/aamirafridi/jQuery.Marquee/master/jquery.marquee.min.js"></script>
<div onclick="myfunction()" class="marquee" style="width: 300px; overflow: hidden;"> hello </div>
<script>
function myfunction() {
alert("marquee");
$('.marquee').marquee();
}
</script>
Check fiddle
Related
<div class="a">hello</div>
<div class="b">bye</div>
I have a one page website and I want a div to be loaded first and then the second one and... Can I do this just with html and css? Or it needs JavaScript or...
Just do it with Javascript:
Change your Body to <body onload="onloadFunction()">
Add style="display: none;" to your div Elements
Add following script:
<script language="javascript" type="text/javascript">
function onloadFunction(){
document.getElementsByClassName("a").style.display = "true";
document.getElementsByClassName("b").style.display = "true";
}
</script>
and change the order of the document. lines to which order you want to have it.
You can try this with something like.
$(document).ready(function() {
$(".b").delay(2000).fadeIn(500); //class b is on delay
});
Can't done with only HTML and CSS. Need to involve JavaScript or jQuery code too.
Yes you need javascript and I suggest jquery(javascript library).
More info at: http://www.w3schools.com/jquery/jquery_get_started.asp
And here is working example(just run with browser and click button):
<div class="a" style="display: none;">hello</div>
<div class="b" style="display: none;">bye</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.a').show();
setTimeout(function(){$('.b').show()}, 2000);
});
</script>
I keep struggling with masonry. It seems it is trying to do it's work, but it's not aligning properly. I have been trying to fix it for hours now. I searched here and found people with the same problem, but the solutions didn't work for me. Here is all the code:
<div id="container">
<?php while (next_news()): ?>
<div class="newsitem">
<span class="newstitle"><?php printNewsTitleLink(); ?></span>
<span class="newsdate"><?php printNewsDate(); ?></span>
<span class="newscontent"><?php printNewsContent(); ?></span>
</div>
<?php endwhile; ?>
</div>
CSS Code:
div.newsitem {
width:215px;
text-align:justify;
margin:5px;
padding:15px;
float: left;
font-size:12px;
background-color:#FFF;
}
#container {
display:inline-block;
}
Here's the script, I did try to give the columns a width or change the Gutterwidth, but nothing worked:
My Script:-
<script>
$(function(){
$('#container').masonry({
itemSelector: '.newsitem'
});
});
</script>
And here the included files to make it all work:
<script src="<?php echo $_zp_themeroot; ?>/js/jquery-1.7.2.min.js"></script>
<script src="<?php echo $_zp_themeroot; ?>/js/jquery.masonry.min.js"></script>
And where it should be working: http://dagloos.com/lust/index.php?p=news
Please help me, I would really appreciate it. I'm about to pull out my hair over this.
I figured out what the problem was!
<script src="<?php echo $_zp_themeroot; ?>/js/jquery.masonry.min.js"></script>
Just had to be placed AFTER the fancy box script.
Firstly, try putting
$(function(){$('#container').masonry({ itemSelector: '.newsitem' }); });
inside the
$(document).ready(function() {
function, it should work then I think.
Shot in the dark but try and replace:
div.newsitem {}
with
.newsitem{}
Sidenote:
<script type="text/javascript" src="/lust/themes/bottomline/js/jquery.fancybox-buttons.js"></script>
currently leads to a 404.
In the console, its clearly says that it couldn't load masonry.
TypeError: Object [object Object] has no method 'masonry'
I'm tring to use DHTMLX combobox, I guess I included in my code all that I need, find code snippet below:
<script>
window.dhx_globalImgPath = "/resources/javascript/codebase/imgs/";
</script>
<link rel="STYLESHEET" type="text/css"
href="/resources/javascript/codebase/dhtmlxcombo.css">
<script src="/resources/javascript/codebase/dhtmlxcommon.js"></script>
<script src="/resources/javascript/codebase/dhtmlxcombo.js"></script>
<script>
function doOnLoad() {
var z = new dhtmlXCombo("combo_zone", "alfa", 200);
z.enableFilteringMode(true, "php/loadCombo.php", true, true);
}
</script>
<div id="combo_zone" style="width: 200px; height: 30px;"></div>
Anyone can tell me if there is something wrong in my code?
Thnaks in advance
Code wrapped in onLoad which seems never triggered, just change code as
<div id="combo_zone" style="width: 200px; height: 30px;"></div>
<script>
var z = new dhtmlXCombo("combo_zone", "alfa", 200);
z.enableFilteringMode(true, "php/loadCombo.php", true, true);
</script>
I am building a jQuery dialog with tabs in a PHP script. The script uses the 'include' directive inside of a loop, iterating over the tabs and including the other scripts. Each of the included files has the data for the tab and a <script> tag with a jQuery document.ready() function in it. Without the loop, it essentially does this:
<div id="tabDialog">
<div id="tabs">
<ul>
<li><a href="#tab1'>Tab1</a></li>
<li><a href="#tab2'>Tab2</a></li>
</ul>
<div id="tabContainer">
<div id="tab1">
<?php include "tab1.php"; ?>
</div>
<div id="tab2">
<?php include "tab2.php"; ?>
</div>
</div>
</div>
</div>
and, for example, tab1.php might have something like:
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
});
</script>
The problem is, upon creating and opening the dialog using the <div id="dialog"> as the dialog's DIV, the document's ready function is called a second time. Here is the dialog code:
$("#tabDialog").dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
}).dialog ('open');
What is the cause of this and what would be the best way to remedy the situation? I'm trying to keep each tab's functionality in separate files because they can be used in multiple situations and I don't have to replicate the code associated to them.
Thanks for any help or advice.
I believe I've found the reason and created a reasonably good fix. When jQuery creates the dialog, it moves the DIV that contains the contents of the dialog around in the DOM (to the very end of the document) and surrounds that div with the necessary scaffolding that a dialog requires (probably by using the .append() function or something similar). Because the DIV which was being dynamically had Javascript contained within it, jQuery was calling the document.ready() function after the DIV was relocated in the DOM (i.e. a second time). Therefore, prior to building the dialog, I .remove() every script tag within the dialog's DIV like this:
$("#tabDialog").find ("script").remove ();
$("#tabDialog").dialog ({
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
});
Doing this removes the SCRIPT tag from the DIV which it was originally loaded in, but the SCRIPT itself still exists. I'm still researching this because I don't completely understand where the Javascript code that was dynamically loaded actually "lives," but I suspect it's located somewhere outside of the DOM. I verified this in Chrome, Firefox, and Exploder 8.
I verified that any scripts that were originally contained within the loaded DIVs still function as expected by putting a button in the DIV and assigning a .click() function. Here is a small test that demonstrates this:
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dialogContents" style="display: none;">
<div style="border: 1px solid black; height: 98%;">
<form id="testForm">
<input type="text">
</form>
<button id="testButton">Test</button>
<script type="text/javascript">
$(document).ready (function () {
alert ("ready");
$("#testButton").click (function () {
alert ('click');
});
});
</script>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready (function () {
//
// Remove all the scripts from any place in the dialog contents. If we
// do not remove the SCRIPT tags, the .ready functions are called a
// second time. Removing this next line of Javascript demonstrates this.
//
$("#dialogContents").find ("script").remove ();
$("#dialogContents").dialog ({
width: 300,
height: 300,
title: 'Testing...'
});
});
</script>
</html>
I appreciate the help people provided in this thread!
I haven't used .dialog() too much, but do you need to use jQuery's ready() method in your script?
Looks like .dialog() has callback options you could take advantage of.
Script in tab:
<script type="text/javascript">
function onOpen() { alert('tab1 loaded') };
</script>
dialog:
$(this).dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
open: function(event, ui) { onOpen(); } // call function in script
}).dialog ('open');
So I have to say that I am not 100% sure why it is happening even though I understand that the dialog does maintin it's own state so this might be one of the reasons. But I could be way off. But the way to get around it is to use something like this instead:
$(document).one('ready', function () {
alert ('tab1 loaded');
});
This will make sure that it only runs once when the page loads.
I also had this problem, but the cause in my case was something different. I had a self-closing div element inside of the div that was used as the dialog holder. When I replaced the self-closing element with a closing tag, the document ready function stopped firing twice and only fired once, as expected.
For example, this caused the document ready function to fire twice:
$("#foo").dialog({
// ...
});
...
<div id="foo" title="My Dialog">
<div id="bar" />
</div>
Whereas this only fired the document ready function once:
$("#foo").dialog({
// ...
});
...
<div id="foo" title="My Dialog">
<div id="bar"></div>
</div>
You probably don't need the .dialog('open') call; use the option autoOpen : true instead.
Here's the resulting text of the page. I did a view-source and then removed any extraneous stuff from the page to try and make it simpler.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tabDialog" style="position: relative; display: none;" title="Test Dialog">
<div id="tabs" style="position: absolute; top: 5px; bottom: 40px; left: 3px; right: 3px;">
<ul>
<li><a href='#tab1'>Tab #1</a></li><li><a href='#tab2'>Tab #2</a></li>
</ul>
<div class="tab_container" style="position: absolute; top: 35px; bottom: 0px; left: 1px; right: 1px; overflow: auto;">
<div id='tab1' class='tabPage ui-dialog-content'>
<form id="tab1Form">
More testing... <input class="keypressMonitor" type="text">
</form>
Testing...<br/>
Testing...<br/>
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
$("#tab1Form").bind ('save', function () {
alert ("in tab1Form.save ()");
});
});
</script>
</div>
<div id='tab2' class='tabPage ui-dialog-content'>
<form id="tab2Form">
<div style="position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px;">
Testing: <input class="keypressMonitor" type="text">
<textarea id="testArea" class="keypressMonitor tinymce" style="position: absolute; top: 30px; bottom: 2px; left: 2px; right: 2px;"></textarea>
</div>
</form>
<script type="text/javascript">
$(document).ready (function () {
$("#tab2Form").bind ('save', function () {
alert ("in tab2Form.save ()");
});
});
</script>
</div>
</div>
</div>
<div id="dialogButtons" style="position: absolute; bottom: 3px; left: 3px; right: 15px; text-align: right; height: 32px;">
<button class="applyButton" disabled>Apply</button>
<button class="okButton" disabled>Ok</button>
<button class="cancelButton">Cancel</button>
</div>
</div>
<script type="text/javascript">
$(document).ready (function () {
$("#tabs").tabs ();
$("button").button ();
/**
* Pressing the cancel button simply closes the dialog.
*/
$(".cancelButton").click (function () {
$("#tabDialog").dialog ("close");
});
$("#tabDialog").dialog ({
open: function () {
},
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
height: 'auto'
});
});
</script>
</body>
</html>
Puts your script into create method:
$.dialog({
<your parameters>
create: function() {
<your script>
}
}
With this method your script is called once only you create the dialog, not twice!
I am trying to load WalkScore Map into one of div's on the page. For some reason my code works only if I alert() something right after $.get() method. Have no idea why.
Can someone suggest something? Thanks.
<html>
<head>
<title>jQuery - Ajax dynamic content loading</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadWalkScore()
{
$.get("http://www.walkscore.com/tile/show-tile.php?wsid=567f19156a706dddb8a799630d85467e",null,null,"script");
alert("hello");
}
</script>
<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">
<script type="text/javascript">
var ws_lat = "40.710318";
var ws_lon = "-74.016553";
var ws_width = "630";
loadWalkScore();
</script>
</div>
Try using something like this, to make the call when the DOM is ready.
<script type="text/javascript">
$(function()
{
$.get("http://www.walkscore.com/tile/show-tile.php?wsid=567f19156a706dddb8a799630d85467e",null,null,"script");
});
</script>
Put this block after your first <script> element.
For me is working. I had to change the wsid for my domain. I've checked the get request using Firebug and I get a javascript as a response. At the begining I was getting an error because I was using you wsid and it seems that for each calling sides they generate a new one. Try to see if your wsid is the correct one.