As the title says, I am implementing the Masonry in certain part of my wordpress website.
You may check it out here and find the image below:
In the image above, that's the place I'm trying to implement the masonry.
The codes for masonry in here:
Fiddle
$(window).load(function(){
$('.tentofifteen').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 1,
});
});
.grid-item {
float: left;
}
.grid-superloop-ten {width:319px; min-height:700px;background:#CCC;}
.grid-superloop-eleven {width:220px; min-height:350px; background:#009;}
.grid-superloop-twelve {width:437px; min-height:350px; background:#F36;}
.grid-superloop-thirteen {width:337px; min-height:350px; background:#CC9;}
.grid-superloop-fourteen {width:319px; min-height:350px; background:#0F0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class="tentofifteen">
<section class="grid-superloop-ten grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-eleven grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-twelve grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-thirteen grid-item" id="wired-superloop">
</section>
<section class="grid-superloop-fourteen grid-item" id="wired-superloop">
</section>
</div>
It works right?
The problem is, when I start COPYING the same exact codes from jsfiddle to dreamweaver, nothing is happening. What's wrong? Am I missing something?
In your posted code you are loading masonry twice.
On your site, you are loading masonry before jQuery but calling it with a jQuery function so you need to load your scripts like this instead of the way they are currently.
<script src="https://code.jquery.com/jquery-2.1.3.js" type="text/javascript" language="javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js" type="text/javascript"></script>
BTW, you site is loading 2 versions of jQuery, 1.11.3 and 2.1.3. You need to load just one.
Related
I did all what they say on their "how to use" section. added its JS code (I opted to use a CDN) and the example (class="wow bounce"). but it doesn't do anything. browsing, I found a solution (add .wow {visibility: hidden} from here). okay, there is a solution, but it isn't in the wow.js page or github readme. how can I use it properly stackoverflowlessly?
here is my wow.js-related code:
<body>
...
<div class="wow bounce">...</div>
...
<script type="text/javascript" src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.js">
</script>
<script>new WOW().init();</script>
</body>
I am trying to make a div hide and then show itself when the page has fully loaded.
The div tag doesn't appear but then it also never loads and I can't figure out why.
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#home-pro-slider').show();
});
</script>
<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs" style="display:none;">
</div>
</div>
</div>
My console shows:
Uncaught ReferenceError: $ is not defined
at (index):479
I believe this is caused by me not loading in jQuery before I run this snippet, but I have the reference in my header before this code runs as far as I am aware.
EDIT: Apologies, I made an error copying and pasting my code, the missing ')' is indeed there, I still have the issue.
Add a ) as error message clearly shows.
$(document).ready( function() {
$('#home-pro-slider').show();
})
You have a typo, missing a the ) of the ready function
$(document).ready( function() {
$('#home-pro-slider').show();
});
EDIT: I just read your edit and the problem you face is that jQuery is not initialized properly. You have to define your jQuery-Script-Tag first and then follow it up with other scripts like so:
<head>
.
css and meta info
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="myScript.js"></script>
</head>
I also want to add that you should always separate your code. CSS belongs into a separate CSS-file and not inline. The javascript belongs into a separate file as well and the text/javascript or application/javascript-tags are deprecated and should be left out.
As you can see below: It does work but because the div was empty you could not see anything. If you somehow load your javascript before you initialize the div it might not be able to find it but with $(document).ready() this can't be the case.
$(document).ready( function() {
$('#home-pro-slider').show();
});
#home-pro-slider {
display: none;
background-color: red;
width: 30px;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs">
</div>
</div>
</div>
Missing close tag
$(document).ready( function() {
$('#home-pro-slider').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#home-pro-slider').show();
});
</script>
<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs" style="display:none;">
</div>
</div>
</div>
I can't get it to work. I've added it via CDN and a code snippet for smooth scrolling in app.js straight from an example from the author to be sure I got it right. Clicking on my link takes me nowhere.
<li class="active">Contact</li>
...html
<footer class="footer" id="footer">
...html
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.ui.min.js"></script>
//app.js
$("#footer").velocity("scroll", {
duration: 800,
delay: 500
});
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
I have looked around and although I have found similar questions to this one, none of them had any solutions that worked for me.
Here is a link to another question similar.
Draggable and resizable in JqueryUI for an image is not working?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
This is just a very basic example but when I run this the image is movable but is not resizable. Although as far as I can tell, it should definitely work.
In the link above at the bottom of the question there is a link to a working example.
http://jsfiddle.net/8VY52/
The example is using jfiddle with this exact same HTML and javascript.
Is there something I am missing about Jquery UI, why does this work through Jfiddle but does not seem to work within the code above.
Thanks.
You are missing the jquery-ui CSS file in your code
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
Demo: Plunker
Complete working code would be.
</head>
<body>
<div id="draggableHelper" style="display:inline-block">
<div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#image').resizable();
$('#image').draggable();
$('#image').resize(function(){
$(this).find("img").css("width","100%");
$(this).find("img").css("height","100%");
});
});
</script>
</body>
</html>
This will work for you.
<div id="draggableHelper" style="display:inline-block">
<div id="image"><img src="http://www.google.com.br/images/srpr/logo3w.png" /></div>
</div>
As the resizable property only works on right side and bottom side so find the image borders find that by selecting a image in css and border to it then see the output it will work perfectly