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'
Related
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
Hello i'm trying to insert
<?php comments_template(); ?>
into the jQuery show function below, but it doesn't work. Is it even possible to insert the php function into jQuery?
*update
<head>
<script src="code.jquery.com/jquery-latest.js"></script>;
</head>
<button>Show it</button>
<a style="display: none"><?php comments_template(); ?></a>
<script>
$("button").click(function () { $("a").show("slow"); });
</script>
May be if your comments_template returns its result as a string, instead of directly printing it with echo, you just need something like this:
<?php echo comments_template(); ?>
Firstly, make your comments_template() return a full string.
Then, try structuring your code like this. You want to .hide() the comments on .ready(), and then .show() them when you click the .comment-button button.
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button class="comment-button">Show Comments</button>
<p class="comments"><?php echo comments_template(); ?></p>
<script>
$("document").ready(function() {
$(".comments").hide();
$(".comment-button").click(function () {
$(".comments").show("slow");
});
});
</script>
</body>
Don't use direct elements with $() in jQuery, either; use a class or an ID.
Also, if you want a brilliant framework to use that can collapse elements with subtle animations, try Bootstrap for Twitter and then do something like this:
<div class="comment-1 collapse">
<?php echo comments_template(); ?>
</div>
<button data-target=".comment-1" data-toggle="collapse">Show Comment</button>
No Javascript needed, since it's already in the bootstrap library.
I want to implement infinite scroll for the mobile website.
I want to find a plugin for this which uses JS,PHP and Ajax.
Also it should have show more for scroll like the one in Google Images Search.
Thanks in Advance!!
you can find one here
PS: jQuery runs fine with smartphones so i guess this should work fine for you.
Edit
Works perfect in a Windows Phone 7.5
Got a code :
<html>
<body>
<div id="test">scroll to understand</div>
<div id="wrapper" style="height: 400px; overflow: auto;">
<div id="content"> </div>
</div>
<script language="JavaScript">
var more = '<div style="height: 1000px; background: #EEE;"></div>';
var wrapper = document.getElementById("wrapper");
var content = document.getElementById("content");
var test = document.getElementById("test");
content.innerHTML = more;
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
function scroller() {
test.innerHTML = wrapper.scrollTop+"+"+wrapper.offsetHeight+"+100>"+content.offsetHeight;
if(wrapper.scrollTop+wrapper.offsetHeight+100>content.offsetHeight) content.innerHTML+= more;
}
addEvent(wrapper,"scroll",scroller);
</script>
</body>
</html>
But instead of this i want scroll to happen at the end of page as this jquery condition this..How to do this in javaScript?
$(window).scrollTop() == $(document).height() - $(window).height()
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 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.