I'm using Jquery Wookmark as an alternative to Masonry.js but I can't get it to work at all. What am I doing wrong here?
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<?php include("include/head.php"); ?> // CONTAINS JQUERY 1.9.1
<link rel="stylesheet" type="text/css" href="css/posts.css" />
<link rel="stylesheet" type="text/css" href="css/searches.css" />
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
</head>
<div id="postsHolder">
<div class="post singlePost">
<div class="postInner">
<div class="postTop">
<div class="postTopRow"><strong>Title</strong></div>
</div>
<div class="postContentHolder postNoteText">
Post Information
</div>
<div class="postOptions"></div>
</div>
</div>
x20 (or however many php script specifies)
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
This is how it appears to tell you to do it on github but I can't get them to block up beneath each other without a huge gap. What do I need to change?
first include jQuery file
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
then add
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#postsHolder div').wookmark();
});
Include Jquery and add css inside the head tag
<html>
<style>
.singlePost{
float: left;
width: 210px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
</html>
As jQuery is already included (as mentioned in comments), all you need to do is wrap your custom script in a $( document ).ready() function:
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
Your CSS declaration at the top will do nothing if it's just plain text. CSS must be placed within the document's <head> and must be wrapped within the style element:
<head>
<style type="text/css">
.singlePost{
float: left;
width: 210px;
}
</style>
</head>
Your script is in head. And when it is executed maybe postsHolder div not exists. Replace it with function
<script>
$(function(){
$('#postsHolder div').wookmark();
}
</script>
EDIT: precise selector and add container. This work for me, and without float:left.
See container property
$(function() {
// Call the layout function.
$('#postsHolder .post').wookmark({
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('body'), // the width of this element is used to calculate the number of columns, defaults to "window". For example $('myContentGrid'). Container should also have the CSS property "position: relative".
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
});
});
Related
I'm trying to use jQuery to change the value of the div 'dog' from blue (CSS) to red (javascript css code), but the javascript seems to not be functioning. CSS, JavaScript and jQuery are all linked properly (have checked).
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="dog"></div>
</body>
</html>
CSS CODE:
#dog {
background-color: blue;
height: 200px;
width: 200px;
}
JAVASCRIPT (jQuery) CODE:
$("#dog").css("background-color", "red");
but the javascript seems to not be functioning. CSS, JavaScript and
jQuery are all linked properly (have checked).
Ensure that you encapsulate the javascript within a $( document ).ready(). This should solve the problem if the script is loaded in the head element, where the HTML document has not been loaded fully yet.
However, an alternative solution is to use the script tag within the body element.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery
.min.js"></script>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style>
#dog {
background-color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="dog"></div>
<script>
$("#dog").css("background-color", "red");
</script>
</body>
</html>
do this in your js file -
window.onload = function () {
$("#dog").css("background-color", "red");
}
The reason is this -
window.onload - it is called after all DOM, JS files, Images, Iframes, Extensions and others completely loaded. This is equal to $(window).load(function() {});
As you have a seperate js file, and you want the style to be changed when the page is loaded, so you have to do this.
For more understanding, you can refer this - Difference between onload and window.onload
With this code I want to show a jQuery UI dialog when I click on a button. However, the text of the dialog is shown for a brief time when the page loads. What is the right way to implement this?
My html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
.. html code ..
<button id="helpbutton" title="">Help</button>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will be visible for a short time when the page loads</p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
</body>
</html>
as you can see, I call my external scripts just before the end of the for performance reasons.
myJsFile.js:
//Fire up the help dialog when the help button is pressed
jQuery(function() {
jQuery( "#helpdialog" ).dialog({
autoOpen: false
});
jQuery( "#helpbutton" ).click(function() {
jQuery( "#helpdialog" ).dialog( "open" );
});
});
Solution (thanks to krzmig): Use this CSS code in the CSS file or in the section
#helpdialog {
display: none;
}
Did you load UI jQuery JS and CSS? Like in this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
source: https://jqueryui.com/dialog/
edit:
For not showing dialog box when site is loading put to your CSS file code:
#helpdialog {
display: none;
}
or add to <head> section if you don't have external CSS.
<style>
#helpdialog {
display: none;
}
</style>
First include jquery as well.
Second place your scripts before your dialog in html so that it loads and hides the dialog before it could show up itself on your page. Here's the code (keep your myJsFile.js intact):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="helpbutton" title="">Help</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will NOT! be visible for a short time when the page loads</p>
</div>
</body>
</html>
You also need to include jquery main library. The required includes are jquery library, jquery ui js, and jquery ui css.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script
I'm trying to grab a specific div container of an external source. But unfortunately there are also div IDs inside this div container, which aren't needed.
The grabbing works, but the blocking doesn't. FYI: I'm new to JavaScript and searched already for a solution.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="LinkToExternal.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#article').load('ExternalURL #DIV_Container');
});
document.getElementsByClassName('NotNeededClass').style.visibility = 'hidden';
document.getElementById('NotNeededID').style.visibility = 'hidden';
</script>
</head>
<body>
<div id="container">
<div id="article"></div>
<div id="article2"></div>
</div><!--container-->
</body>
The code you have for hiding the elements is firing right after the load function. The likely cause is that the elements you are trying to hide have not been loaded into the DOM. Place your code in a callback function of the load function, this will ensure that your elements have been loaded into the DOM.
<script type="text/javascript">
$(document).ready(function(){
$('#article').load('ExternalURL #DIV_Container',function(){
$('.NotNeededClass, #NotNeededID').hide();
});
});
</script>
Some of my sites are fine but others I go to create from scratch like so:
<?php
define("NAME", "Terrasoft");
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?=NAME?></title>
</head>
<script href="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script href="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("#date").html(Date.parse("today"));
});
})(jQuery);
</script>
<style type="text/css">
#date {
font-weight: bold;
}
</style>
<body>
<div>
Welcome to the <strong>Terrasoft Development Server</strong>. This page was output at a system time of <strong><?=date("g:i:s A")?></strong> on <strong><?=date("F j<\s\u\p>S</s\u\p>")?></strong>. The current local time is <span id="date"></span>.
</div>
</body>
</html>
... and the script elements at the top do not get included and have no content inside Firebug. I am online—that's not the issue. I get jQuery is not defined. Any ideas? Thanks.
Script tags do not have the href attribute, use src.
<script src="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
You should be aware that href attributes are for <a> tags/anchor.
the src attribute specifies the URL of an external script file.
Note: Point to the external script file exactly where the script is written.
Syntax:
<script src="URL">
Just started playing with JQuery UI slider, haven't been able to display it on my page. Tried bunch of things bit to no avail. Heres my code, any suggestions would be much appreciated. Am using Django for referring to the javascript files,
<html>
<head>
<title>Search Results</title>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/jquery-1.4.2.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.slider.js"></script>
<LINK rel="stylesheet" href="{{ STATIC_URL }}jquery-ui-1.8.4/themes/base/jquery.ui.slider.css" type="text/css">
</head>
<body>
<meta charset="utf-8" >
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
<div class="demo">
<div id="slider"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->
</body>
The jQuery UI is quite easy to setup. Simply reference the appropriate CSS/JavaScript files in the document <head> tag.
Code in <head> tag:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Slider Initialization HTML:
<div id='mockSlider'></div>
<input type='text' id='currentValue' />
Slider Initialization jQuery:
$("#mockSlider").slider({
range: false,
min: 0,
max: 100,
slide: function(event, ui) {
doSomething(ui.value);
}
});
function doSomething(sliderValue) {
$('input[type="text"]').attr('value', sliderValue);
}
Slider Initialization CSS:
#mockSlider {
width: 80%;
margin-bottom: 15px;
}
#currentValue {
width: 3empx;
text-align: center;
}
Follow the link below to see an jsFiddle example. Specifically, take a look under the external resources menu, where you will see the 3 code references. Then, press F12 and use the debugging selection tool to see what is in the <head> of the rendered document.
Example Slider
Are you getting any javascript errors when loading the page ? If so what is it ?
Can you make sure your javascripts (jqyeru ui) are loaded properly ?
If you use firebug, you can see the errors in the console tab. FireBig is a firefox addon which makes web development a lot easier
www.getfirebug.com
Sometimes jquery ui widgets not showing may be due to missing jquery-ui-scope div. All jquery ui styles are defined within the scope of div with jquery-ui-scope class.