I am facing problem with masonry, it was working perfect, now it random stop animating.
i am so much confuse; i try everything but it is not animating pics any more..
is there anyone with solution?
I uploaded a simple webpage with masonry, Please take a look to find error.
http://www.bhinderblink.com/masonryDemo.aspx
http://www.bhinderblink.com (this main page working with DB, repeater and jquery to load pictures)
Script
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#container').masonry({
// options
itemSelector: '.box',
columnWidth: 240,
isAnimated: true
})
});
</script>
Body
<div id="container">
<div class="box">
<div id="imageDiv1">
LoadImage...1<br />
<asp:Image runat="server" ID="img1" ImageUrl="~/pic/jas/pic10.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv2">
LoadImage...2<br />
<asp:Image runat="server" ID="Image2" ImageUrl="~/pic/jas/pic11.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv3">
LoadImage...3<br />
<asp:Image runat="server" ID="Image1" ImageUrl="~/pic/jas/pic12.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv4">
LoadImage...4<br />
<asp:Image runat="server" ID="Image3" ImageUrl="~/pic/jas/pic13.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv5">
LoadImage...5<br />
<asp:Image runat="server" ID="Image4" ImageUrl="~/pic/jas/pic14.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv6">
LoadImage...6<br />
<asp:Image runat="server" ID="Image5" ImageUrl="~/pic/jas/pic15.jpg" />
</div>
</div>
</div>
Main Page body
<form id="form1" runat="server">
<div id="topBanner">
</div>
<asp:Repeater ID="rptCustomers" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div id="container">
<div class="box">
<asp:Image ID="zzz" runat="server" ImageUrl='<%# "~/pic/jas/" + Eval("pic_name") + ".jpg" %>' />
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
<div id="imageDiv">
LoadImage...
</div>
<img id="loader" alt="" src="loading.gif" style="display: none" />
</form>
main page script
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<%--masonry--%>
<script type="text/javascript">
$(function () {
$('#container').masonry({
// options
itemSelector: '.box',
columnWidth: 240,
isAnimated: true
});
});
</script>
<%--Pagging--%>
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
GetRecords();
}
});
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
$("#loader").show();
$.ajax({
type: "POST",
url: "/index.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert("failur");
alert(response.d);
},
error: function (response) {
alert("error");
alert(response.d);
}
});
}
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var pic_infoVar = xml.find("pic_info");
pic_infoVar.each(function () {
var customer = $(this);
$("#imageDiv").append("<img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/>");
});
$("#loader").hide();
}
</script>
Swap the order of the scripts
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
jQuery has to be loaded first for masonry to work:
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
Edit:
Your site seems to have masonry applied to every container class, which seems to be different then your demo page.
Demo page:
<div id="container">
<div class="box">
<div id="imageDiv1">
LoadImage...1<br />
<img id="img1" src="pic/jas/pic10.jpg" />
</div>
<div class="box">
<div id="imageDiv2">
LoadImage...2<br />
<img id="Image2" src="pic/jas/pic11.jpg" />
</div>
</div>
</div>
Main page:
<div id="container">
<div class="box">
<img id="rptCustomers_zzz_0" src="pic/jas/pic1.jpg" />
</div>
</div>
<div id="container">
<div class="box">
<img id="rptCustomers_zzz_1" src="pic/jas/pic2.jpg" />
</div>
</div>
So add another container to contain the .containers or apply masonry to the body itself
$(function () {
$('body').masonry({
// options
itemSelector: '.box',
columnWidth: 240,
isAnimated: true
});
});
$(document).ready(function () {
$('.container').imagesLoaded(function () {
var container = document.querySelector('.container');
var msnry = new Masonry( container, {
// options
colWidth:200,
itemSelector: '.box',
isFitWidth: true,
isAnimated: true,
animationOptions: {
duration: 1000,
easing: 'linear',
queue: false
},
isInitLayout: false
});
msnry._isLayoutInited = true;
msnry.layout();
});
});
Related
First of all I will explain how website functions. First of all user clicks on a template and that is pulled from a database into a div. I than have a button and if that button is clicked a div from that pulled template should change a color. I will now further explain that with a code:
Template pulled:
<!DOCTYPE html>
<html>
<head>
<title>Template 1</title>
<link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo">
<button id="realButton" type="button" class="btn btn-default" ></button>
<input id="logo_upload" type="file" id="files" visbility="hidden" style="opacity: 0;"/>
</div>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
<div contenteditable="true" id="content" class="draggable ui-widget-content refresh"><p>hlo</p></div>
<div id="comments">
<form name="forma">
<textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" id="send-data" /><!--onClick="writeComment(e);"-->
<div id ="editTxt" class="refresh" contenteditable="true">
This text can be by the user.
</div>
</div>
</form>
</body>
</html>
Main page where button and template is:
#extends('layouts.master')
#section('title', 'Website Builder')
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
#section('content')
<div class= "container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
<button id="color">hello</button>
<p>hello</p>
</div>
<div id="content-link2"></div>
</body>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
</html>
#endsection
#show
So once template is clicked it is inserted inside div id="content-link2"
Jquery:
$(function() {
$('.content-link').click(function(e) {
e.preventDefault();
$('#content-link2').load($(this)[0].href, function() {
$('#content').draggable({
containment: "#content-link2",
scroll: false
});
});
});
return false;
});
$('#h').click(function(e) {
e.preventDefault();
var code = document.getElementById('content-link2').innerHTML;
console.log(code);
});
function writeComment(e) {
var comment = document.forma.commentUser.value;
e.preventDefault();
document.getElementById('comments').innerHTML = comment;
}
document.getElementById("content-link2").onmousedown = function() {mousedown()};
document.getElementById("content-link2").onmouseup = function() {mouseup()};
function mousedown() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function mouseup() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"});
});
});
And once button is pressed, whatever is inside div id="content-link2 with p tag I want to apply some css doesn't matter what it is. However now when I click a button nothing happens.
Can someone post some suggestions or solutions?
After you pull the template and render it into the div id="content-link2" call these lines again in your javascript,
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
try this
$(document).ready ( function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"})
});
});
You can use :
$(window).load(function(){
$('body').on("click", 'button', function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
I want to show data in a popup window. popup window will be show by clicking on an image. but data doesn't show.
javascript codes:
<script type="text/javascript">
$(document).ready(function () {
$('.popup').click(function () {
$('.box').show("slow");
$('.close').show("slow");
})
$('.close').click(function () {
$('.box').hide("slow");
})
})
</script>
by click on image1 popup window show and by click on image 11 an image sould be show in popup window but doesn't work.
<asp:Image ID="Image1" runat="server" CssClass="popup" />
<div class="box">
<div class="close">
×
</div>
<center>
<asp:Image ID="Image11" runat="server" CssClass=bigpic />
</center>
</div>
the image show but fade quickly!
You can use the jQuery UI library to display a popup, here's an example:
Javascript:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('.popup').click(function () {
$(".box").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
});
</script>
.ASPX:
<asp:Image ID="Image1" runat="server" CssClass="popup" ImageUrl="~/Images/img1.jpg" />
<div class="box">
<asp:Image ID="Image11" runat="server" CssClass="bigpic" />
</div>
My html page nextPage.html. Here I am trying to post 'category-id' $ 'category_name' into a list, but I can't. Below are my code portions:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script src="js/nextPage.js"></script>
<title>Edfutura1</title>
</head>
<body>
<center>
<div id="report" data-role="page">
<div id="loading" > </div>
<div data-role="main" class="ui-content">
<!-- <div data-role="content"> -->
<form id="nextForm" method="post">
<ul data-role="listview" data-inset="true" id="category">
</ul>
</div>
<!--<input type="submit" value="get" id="submitButton"> -->
</form>
</div>
</div>
</center>
</body>
</html>
Here is my js page nextPage.js
var serviceURL = base_url;
$(document).on("pageinit","#report", function() {
$("#loading").css("display", "block");
var form = $("#nextForm");
var $categorylist= $('#category');
var submitUrl = serviceURL+"categorylist/get_categorylist";
$.ajax({
url: submitUrl,
dataType: 'json',
type: 'POST',
success: function(response) {
alert("ok");
},
error: function() {
alert("error")
}
});
});
My controller is categorylist.php
public function get_categorylist()
{
$cat=$this->categorylist_model->get_cat();
echo json_encode($cat);
}
Model is categorylist_model.php
public function get_cat()
{
$this->db->select('category_id,category_name');
$this->db->from('amm_report_category');
$query = $this->db->get();
return $query->result_array();
}
This is a part of my page:
<link href="scripts/jquery-ui.css" rel="stylesheet" />
<link href="scripts/jquery-ui.theme.css" rel="stylesheet" />
<script type="text/jscript" src="scripts/jquery.js"></script>
<script type="text/jscript" src="scripts/jquery-ui.js"></script>
<script type="text/jscript" src="scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<div>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/HeaderBar.png" CssClass="header" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/title.PNG" CssClass="Title" />
<img alt="" class="logo" src="Images/ECON_76px.png" />
<asp:Label ID="Label2" runat="server" CssClass="VersionText" Text="Version {0}"></asp:Label>
<asp:LinkButton ID="lbLogOff" runat="server" CssClass="lbLogOff" ToolTip="Close your current session">Log off</asp:LinkButton>
<asp:LinkButton ID="lbReset" runat="server" CssClass="lbReset" OnClientClick="ShowDialog();" ToolTip="Restart your session as if you would just have logged in">Restart</asp:LinkButton>
<asp:Label ID="lblTestDB" runat="server" CssClass="lblTestDB" Text="CONNECTED TO TEST DATABASE"></asp:Label>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ViewStateMode="Enabled">
</asp:ContentPlaceHolder>
</div>
<div id="dialog" title="Restart">
<p>This will clear all data of the current session (as if you would have just logged in)!</p>
<p>Are you sure?</p>
<input id="yes" type="button" value="Yes" />
<input id="no" type="button" value="No" />
</div>
<script type="text/jscript">
function ShowDialog() {
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
}
</script>
</form>
</body>
The idea is to show a dialog when the restart button is clicked as I don't like the alert box of Chrome.
Why does it not work?
Kind of took it straight from an example in a book.
You aren't loading any jQuery UI CSS libraries, and you are loading 2 versions of normal jQuery. As a quick test, try removing your own jQuery libraries and link to Google to get you started. You can then gradually place yours back:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
A side note, you are mixing type "jscript" and "javascript". As of HTML5, you can simply leave off specifying type declarations. It will be assumed to be CSS or JavaScript.
There it needs some changes in your code. Try this:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
});
function ShowDialog() {
$("#dialog").dialog('open');
}
</script>
here, I have code that enables dragging and dropping of accordian.
But what I want is when User clicks on edit, then content in accordian should be editable.
I have tried the answers from following link How to make an element's content editable with JavaScript (or jQuery). But not getting the result i want.
The script is:
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src=" http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function () {
$('#accordion').accordion({
collapsible: true,
active: false,
height: 'fill',
header: 'h3'
}).sortable({
items: '.s_panel'
});
$('#accordion').on('accordionactivate', function (event, ui) {
if (ui.newPanel.length) {
$('#accordion').sortable('disable');
} else {
$('#accordion').sortable('enable');
}
});
$( ".sortable" ).sortable({
connectWith : ".sortable"
});
});
</script>
<script>
$('#btn1').click(function () {
$('#content1').attr('contenteditable', 'true');
});
</script>
</head>
The HTML is:
<body>
<br /><br />
<div id="source" style="width:345px;float:left; border:1px dotted ">
<div id="accordion" style="height:450px;width:300px; " class="sortable">
<div class="s_panel">
<h3 class="ui-state-default unassigned">About Us</h3>
<div id="data">
<div id="content1">This is about Us</div>
<form>
<input id="bt1" type="button" value="edit"/>
</form>
</div>
</div>
</div>
</div>
<div id="teams" style=" position:absolute; top: 100px; left:400px; width:600px;" >
<ul class="sortable" style="height:450px;width:550px; "></ul>
</div>
</body>
Working FIDDLE
$('#btn').click(function () {
$('#content1').attr('contenteditable', 'true');
});
<input id="btn" type="button" value="edit" />
New Edited :-
$( ".sortable" ).sortable({
connectWith : ".sortable"
});
FIDDLE 2