I have implemented jQuery masonry to our site and it works great. Our site is dynamic and users must be able to add/remove masonry box's. The site has an add example but no remove example. Our db is queried returning x number of items. Looping through they are loaded and displayed. Here's a code sample: (we are use F3 framework and the F3:repeat is it's looping mechanism.).
<div id="container" class="transitions-enabled clearfix" style="clear:both;">
<F3:repeat group="{{#productItems}}" value="{{#item}}">
<div id="{{#item.itemId}}">
<div class="box">
<div class="view"> <!-- for css -->
<a onclick='quickRemove("{{#item.itemId}}")>
<img src="{{#item.pic}}" />
</a>
</div>
<p>
{{#item.title}}
</p>
</div>
</div>
</F3:repeat>
</div>
In the javascript code the item id number is unique and is passed into the function. It's also the div id# to distinguish each box. I've tried various combinations and methods but can't seem to get this to work.
function quickRemove(item){
var obj = $('#'+item+'').html(); // item is the product id# but also the div id#
$('#container').masonry('remove',obj);
$('#container').masonry('reloadItems');
$('#container').masonry('reload');
}
Has anyone out there successfully removed an item and how did you do it?
Thx.
Currently you appear to be passing a string full of html to the masonry remove method. Pass it the actual jQuery wrapped element by not including .html()
function quickRemove(item){
var obj = $('#'+item+''); // item is the product id# but also the div id#
$('#container').masonry('remove',obj);
$('#container').masonry('reloadItems');
$('#container').masonry('reload');
}
Related
I'm trying to make a pop-up for each item in my app to select quantity.
So it preloads several items on page, and I need to make it show pop-up when clicked on any of them.
I found this solution and tried it:
<div class="items">
<div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity()">
<%= item.name %>
</div>
<div id="light" class="itemshowcontent">
<p>Some content</p>
Close
</div>
<div id="fade" class="blackoverlay"></div>
</div>
where js:
<script>
function itemquantity() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function closeitemquantity() {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'
}
</script>
It works, however when I select quantity, it always selects it only for the first item that comes.
If click on second item (or any other), the pop-up is still for the first one.
I believe this is because I use getElementById, as ID is used for only one object.
I tried changing to getElementsByClassName, but then it doesn't work at all. So, my question is how to make it work?
Should I stick to using classes? Or somehow use ID, within classes?
I apologise if it's simple question, I'm not really familiar with JS.
Any advice appreciated.
EDIT:
Here are some images for what I'm doing. This is page with listed objects:
These are the objects preloaded from DB shown in a list. When you click on any of them, this pop-up comes up:
to select quantity.
I'm developing in elixir and phoenix framework.
Give id to each item and move light and fade out from id and to class. Then, find light and fade by item id when click function is executed. See the following example.
function getParent(itemChild) { // Get parent.
var item = itemChild.parentElement;
return item;
}
function itemquantity(itemChild) {
var item = getParent(itemChild); // Get parent and it is the item.
item.querySelector('.light').style.display='block'; // Find .light element as of item.
item.querySelector('.fade').style.display='block'; // Find .fade element as of item.
}
function closeitemquantity(itemChild) {
var item = getParent(getParent(itemChild)); // You have to get parent twice and that is the item.
item.querySelector('.light').style.display='none'; // Find .light element as of item.
item.querySelector('.fade').style.display='none'; // Find .fade element as of item.
}
<div class="items" id="apple">
<div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity(this)">
Apple
</div>
<div class="light itemshowcontent">
<p>Red Apple</p>
Close
</div>
<div class="fade blackoverlay"></div>
</div>
<div class="items" id="banana">
<div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity(this)">
Banana
</div>
<div class="light itemshowcontent">
<p>Yello Banana</p>
Close
</div>
<div class="fade blackoverlay"></div>
</div>
I have a question about dom navigation with jquery. I'm trying to find an element with a given class that is closest in the dom following a given element.
I have a table like structure, created through divs and styled in css. I have an element being edited, and when the user presses enter I want to focus the following editable element. However, it's not a sibling of the element being edited.
HTML
<div class="calendarEntry">
<div when="2014,9,18" class="when">Sep 18</div>
<div class="items">
<div class="item">
<div code="ABC" class="type">ABC123</div>
<div offered="2014,9,15" class="offered dateish">Sep 15
<div class="offer editable">10</div>
<div class="sku editable">TH1</div>
<button>Publish</button>
</div>
</div>
<div class="item">
<div code="DEF" class="type">DEF321</div>
<div offered="2014,9,14" class="offered dateish">Sep 14
<div class="offer editable">10</div>
<div class="sku editable">TH2</div>
<button>Publish</button>
</div>
</div>
<div class="item">
<div code="GHI" class="type">GHI852</div>
<div offered="2014,9,12" class="offered dateish">Sep 12
<div class="offer editable">10</div>
<div class="sku editable">TH3</div>
<button>Publish</button>
</div>
</div>
</div>
</div>
Note: There are multiple calendar entries on the page.
Say the user is editing the offer of the DEF312 item. When they hit enter I want to edit the offer of GHI852. I have the code to make the div editable, by replacing it with a text field with a class of offer editing. If they're editing the final offer in this calendar entry, then the enter key should focus the first editable offer of the following calendar entry, if there is one. If we're at the bottom of the list I don't want to wrap back to the top (which I think would overly complicate matters anyway).
The bit I'm stuck with is how to find the next offer (all offers are editable).
Here's what I've tried:
var nextOffer = $('.offer').find('.editing').next('.editable');
Clearly, this doesn't work. The problem is that the following editable offer isn't a sibling of the current offer being edited, so next() doesn't work for me. The following offer could be in the current calendar entry, or it's just as likely to be in the next calendar entry. Either way, it's a few divs away, at varying depths.
Can I even do this with jquery dom traversals, or am I better just brute forcing it through javascript (i.e. looping through all .editable instances and returning the one after .editing?
Adding the class 'editing' to simulate the the input:
<div class="item">
<div code="DEF" class="type">DEF321</div>
<div offered="2014,9,14" class="offered dateish">Sep 14
<div class="offer editable">10</div>
<div class="sku editable editing">TH2</div>
<button>Publish</button>
</div>
</div>
you can do:
function findEditable(currentItem) {
var nextEditable = undefined,
selectors = [".item", ".calendarEntry"];
$.each(selectors , function (idx, selector) {
var ref = currentItem.closest(selector);
nextEditable = ref.parent()
.children("div:gt(" + ref.index() + ")")
.find(".offer.editable")
.first();
return nextEditable.length === 0;
})
return nextEditable;
}
findEditable($(".editing")).css({
color: 'red'
});
jsfiddle demo
You can use parents() to get the .offered element which contains the .offer element like so:
var offered = $('.offer').find('.editing').parents('.offered');
From that you can use next() to get into the .offered element's sibling .item element, and find the .editable element within that:
offered.next('.item').find('.editable');
JSFiddle demo. Note that I've manually added this .editing element within your DEF321 item's .offer element - I assume this gets added dynamically on your side, but either way isn't included in your question.
Edit: The HTML in the question has now been changed. Based on this, instead of getting the .offered parent, you'd get the .item parent:
var item = $('.offer').find('.editing').parents('.item');
And proceed in the same way as before:
item.next('.item').find('.editable');
JSFiddle demo.
try this
var current=document.activeElement,
all=$(".editable"),
index=all.indexOf(current),
next=all[index+1]
It first finds the current element and the list of elements,
then it will find the current element in the list.
It will then add 1 to the index and select it from the list.
To extend the array with the indexOf function;
if(!Array.prototype.indexOf){
Array.prototype.indexOf=function(e/*,from*/){
var len=this.length>>>0,
from=Number(arguments[1])||0;
from=(from<0)?Math.ceil(from):Math.floor(from);
if(from<0)from+=l;
for(;from<len;from++){
if(from in this&&this[from]===e)return from;
}
return -1;
};
}
I have a list of <li> items being generated from a CMS/DB. Each <li> has a <div> in it which contains a link to a lightbox (a hidden <div>). The link targets the id of the hidden <div> (#inline-content-print) so the javascript plugin triggers and pulls up the lightbox.
The problem I'm running into is that all of the <li>s on the page generate with the same hidden div id (I can change this to classes). So no matter which <li> href is clicked, it always pulls up the lightbox for the first <li> on the page (the first instance of the id). I need a way for the href to say "open #inline-content-print" from THIS div (the one the link being clicked lives in)".
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
Any advice would be greatly appreciated.
What server side language are you using? Is it producing these list items in a loop? Is there an index on that loop? If so, this would work for you.
[Server language version of a for loop with an index variable named "i"]
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print_[server language output of "i"]">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
[server language version of an end to the for loop]
Assuming you want to do this with jQuery/Javascript, you could use something like this:
$(document).ready(function()
{
$('li a.store-button').click(function(e)
{
var lightboxElement = $(e.currentTarget).find('div');
lightboxElement.show(); // or whatever function you need to display
return false;
});
});
Which is a little script that:
Waits for the page to load.
Finds your list elements (by li object type and the class on the links)
Intercepts click events.
Finds the div element nested in the link that was clicked.
Displays (or runs another function) on the target lightbox element.
I have a specific goal in mind.
Please reference this page: http://cubancomplex.kodingen.com/test/MM/dashboard1.html
On the very bottom right, there is a <div> with two buttons on each side. The <div> currently has one google chart contained inside.
The goal is for a user to be able to use those two buttons to switch between charts for approximately eight cities.
I am not familiar with javascript or jQuery so I would appreciate any assistance! How should I go about achieving this?
Here is the code for that section:
<div id="footer">
<div class="markerNavLeft" title="Prev" id="prevMarker">‹</div>
<div id="markers">
<div id="chart">
<div id="auckland_chart_div"></div>
</div>
</div>
<div class="markerNavRight" title="Next" id="nextMarker">›</div>
</div>
Based on my experience, there's 2 option that you can use..
you can place your charts in your div id="chart". The first one add a class to mark it as a selected one (e.g. selected), of course the other is hidden… Please add a same class for all of the chart(e.g. chart-detail). Then, you can use
var temp = $(".selected").next(".chart-detail"); $(".selected").removeClass("selected"); temp.addClass("selected");
for the previous button, you can use .previous function.
You can use ajax ( .ajax function or .load function). Mark each chart with an ID so, you know what's the next or previous chart (within php).
Update: I have changed my JavaScript code, and I am now receiving errors in my iPhone Debug Console.
Disclaimer: I'm new to web development, and I'm not too good with JavaScript.
Scenario: I'm building an event calendar with CodeIgniter, and I'm hiding elements on mobile devices that need to be displayed elsewhere on the page when an event occurs. The elements being hidden are <ul>s, and they need to be displayed on another portion of the page when their cooresponding <span>s with the class .day_listing_mobile are selected. I've been working with different methods, but I haven't been able to find a solution out for hours as I'm not strong in the realm of jQuery/Ajax/JavaScript.
Question: What methods would be required to make the hidden <ul>s be displayed on a different portion of the page when their corresponding <span>s are selected?
JavaScript (Updated):
(function($) {
var isMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (isMobile) {
$('.event_list').hide(); // setting display:none; on all .event_list <ul> elements
// attach click event to the <span class="day_listing"> elements
$('.day_listing_mobile').click(function() {
var eventList = $(this).sibling('.event_list').clone();
$(this).sibling('.event_list').remove();
$('#mobile_show_content').append(eventList);
});
}
})(jQuery);
I'm Receiving this error on this line of code var $eventList = $(this).sibling('.event_list').clone(); :
CodeIgniter Calendar Template (Controller):
{cal_cell_content}
<span class="day_listing_mobile">
{day}
</span>
<ul class="event_list">
{content}
</ul>
{/cal_cell_content}
{cal_cell_content_today}
<span class="day_listing_mobile" id="today_listing">
{day}
</span>
<ul class="event_list">
{content}
</ul>
{/cal_cell_content_today}
View:
<div class="row">
<div class="twelve columns">
<?php echo $calendar; ?>
</div>
</div>
<div class="show-on-phones">
<div class="row">
<div class="twelve columns" id="mobile_show_content">
<!--I want the <ul>s to show up here-->
</div>
</div>
</div>
Note that the CodeIgniter calendar class generates above where I want to display the <ul>s.
Just modify your click event to move the data around the dom.
$('.day_listing_mobile').click(function() {
var eventList = $(this).sibling('.event_list').clone();
$(this).sibling('.event_list').remove();
$('.mobile_show_content').append(eventList);
});
You can remove the node from the DOM and re-append it in a different place. (.remove() and .append())
But, rather than trying to solve this in javascript, why not design your page with adaptability in mind using css selectors to reflow the page at certain view port widths.
Check this out:
http://www.alistapart.com/articles/responsive-web-design/