We Keep Coding

How to place div items into jQuery Slider showing a minimum of 5 elements with Left-Right slider to view more elements?

I have div elements on a page with col-sm-3 classes. So far, I have 6 of these elements and so, 4 elements are on 1 row and 2 are on the next row which fill half this row. I am using Bootstrap.
I want to make all these elements be contained on 1 row in a slider using JQuery with a minimum of 5 elements showing and be able to click on left-right arrow buttons to view all elements.
I found this example JQuery called lightSlider: http://sachinchoolur.github.io/lightslider/ There are 2 examples on this website and I would like to make mine similar to the second red example.
I have tried to use the lightSlider class on my elements, but no change is seen.
Here is my HTML:
<div class="row whiteBG" id="lightSlider">
#foreach (var item in Model)
{
<div class="col-sm-3 align-centre">
<img src="#item.OutputImage" alt="#item.Image" />
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</div>
}
</div>
I have a row which added multiple amounts of col-sm-3 div elements.
I also placed this below my HTML before the ending body tag:
<script type="text/javascript">
$(document).ready(function() {
$("#lightSlider").lightSlider();
});
</script>
I am using Visual Studio and JQuery is loaded in by default at the bottom of the _Layout.cshtml file:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>

<div class="col-sm-2 align-centre">
Change your class from 3 > 2 so that 5 will fit.

It was the first time using JQuery for me and the problem was that I was including all the classes in my HTML that I saw in the Chrome Developer Tool HTML for the second example slider here: http://sachinchoolur.github.io/lightslider/index.html This was not necessary and caused errors since I was only meant to use 1 class which then automatically added new classes to my HTML.
Firstly, I used the lightslider.js, lightslider.css and controls.png files into my project available here: https://github.com/sachinchoolur/lightslider/tree/master/src
I then placed the folling script into my HTML page before the ending body tag:
$(document).ready(function () {
window.prettyPrint && prettyPrint()
$('#content-slider').lightSlider({
keyPress: false,
item: 5,
loop: true,
onSliderLoad: function () {
$('#content-slider').removeClass('cS-hidden');
}
});
});
</script>
This is available on the GitHub repository link above - I changed it a bit to make the item attribute display 5 elements initally.
It is crucial that you place this script after the script that calls the JQuery. It took me a day to find out this was the problem.
In lightslider.css you need to change the filePath to include the image used for the left-right arrows correctly. the class is .lSAction > a. I just placed mine in the Images folder and this is the attribute that I changed: background-image: url('Images/controls.png');
This is my HTML:
What you need to know is that I only include 1 class in my HTML list: ul<id="content-slider"> which will add the other necessary lightSlider to create the second example slider displayed here: http://sachinchoolur.github.io/lightslider/index.html
<div class="row whiteBG">
<ul id="content-slider" >
#foreach (var item in Model)
{
<li class="col-sm-4 align-centre">
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<img src="#item.OutputImage" alt="#item.Image" />
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</li>
}
</ul>
</div>
I hope this can help someone else going through a similar problem. :)

Two jquery ui tabbed divs on one page. One works, the other doesn't

I have a page with two div panels, a left and a right. Both panels are tabbed using jquery-2.1.4.min.js and jquery-ui.js. One panel has three tabs, and it works.
The js in the head of my page looks like this:
$(function(){
// Doesn't matter if following two lines are reversed. Same output.
$( "#property-card" ).show().tabs(); // this one doesn't work
$( "#tabs" ).show().tabs(); // this one works
});
The html looks like this:
//This tabbed content works:
<div id="tabs">
<ul>
<li>Tasks</li>
<li>Notes</li>
<li>Photos</li>
</ul>
<div id="tabs-1">
<!-- Tasks -->
</div>
<div id="tabs-2">
<!-- Notes -->
</div>
<div id="tabs-3">
<!-- Other -->
</div>
The other div panel looks something like this:
//This one shows hyperlinked text within the content area, instead of showing tabs
<div id="property-card" class="eight columns light-manilla curved10 border-dark border-2 border-ridge padding-1-percent">
<ul>
<li>Property</li>
<li>Help</li>
<li>List Price</li>
<li>Taxes</li>
<li>HOA</li>
<li>Showing Instructions</li>
<li>BPO Values</li>
<li>Buyer Leads</li>
</ul>
<div id="property">
</div>
<div id="property-help">
</div>
<div id="property-list-price">
</div>
<div id="property-taxes">
</div>
<div id="property-hoa">
</div>
<div id="property-showing-instructions">
</div>
<div id="property-bpo-values">
</div>
<div id="property-buyer-leads">
</div>
</div>
(not sure if this is related) Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/jquery-2.1.4.min.js:4:14346
ReferenceError: data is not defined
(I think this one is related) jquery-2.1.4.min.js%20line%202%20%3E%20eval:35:1
See inline screen shot sample for example of what's going on.

Hate answering my own questions, but in another file at the bottom of my html, there is another javascript block, which "activated" the working tabbed div, but because I didn't add the new tabbed div (because I didn't realize that second javascript block was there) the second tabbed div didn't work. Here is what made it work:
$(function () {
$('#property-card').tabs({
activate: function (event, ui) {
var $activeTab1 = $('#property-card').tabs('option', 'active');
}
});
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab2 = $('#tabs').tabs('option', 'active');
if ($activeTab2 == 2) {
// HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
$("#mls-images-carousel").css("display","block");
retrieveAssetImages('<?php echo $as_id; ?>');
}
else{
$("#mls-images-carousel").css("display","hidden");
}
}
});
});

The slideshow and the zoom function is not working anymore of fetching content

I have an images slideshow which each images can bee zoomed in the slideshow. And all the codes I used was working fine before I added some change there.
Here is the working code:
<div id="leftBigWraper"><!-- Example -->
<div id="bigPicture">
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg" alt="" width="100%"/></div>
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg" alt="" width="100%"/></div>
</div>
<div id="smallPicture">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg" width="100%">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg" width="100%">
</div>
</div><!-- End of Example -->
<!--End of Wraper in the Left Side (Product Images)-->
In the working code, all the content in the #bigPicture div is set maually, and the slideshow is run by this script:
var $el = $('#leftBigWraper'),
// SETUP ////////
F = 600 , // Fade Time
P = 5000 , // Pause Time
C = 0 , // Counter / Start Slide# (0 based)
///////////////////
$sl = $('#bigPicture > div'),
$th = $('#smallPicture > img'),
N = $sl.length,
T = 10000;
$sl.hide().eq(C).show();
$th.eq(C).addClass('on');
// ANIMATION
function anim() {
$sl.eq(C%N).stop(1).fadeTo(F,1).siblings().fadeTo(F,0);
$th.removeClass('on').eq(C%N).addClass('on');
}
// AUTO ANIMATE
function autoAnim() {
T = setTimeout(function() {
C++;
anim(); // Animate
autoAnim(); // Prepare another iteration
}, P+F);
}
autoAnim(); // Start loop
// HOVER PAUSE
$el.hover(function(e) {
return e.type==='mouseenter'? clearTimeout( T ) : autoAnim();
});
// HOVER THUMBNAILS
$th.on('mouseenter', function() {
C = $th.index( this );
anim();
});
THE WORKING FIDDLE
However, when all the contents in the #bigPicture div are set by calling it from hidden div and with Jquery, the slideshow and the zooming function is not working anymore.
The Jquery that I used to fill the blank div from the hidden div is here:
$(document).ready(function(){
$('#bigPicture').html($('#pilihWarna li #bigHidden:first').html());
$('#smallPicture').html($('#pilihWarna li #smallHidden:first').html());
$('#pilihWarna li').click(function(event) {
$('#bigPicture').html($(this).find('#bigHidden').html());
$('#smallPicture').html($(this).find('#smallHidden').html());
});
});
As follows:
First, I left the div of #bigPicture to be blank or without any content in there.
<!--Wraper in the Left Side (Product Images)-->
<div id="leftBigWraper"><!-- Example -->
<div id="bigPicture"></div>
<div id="smallPicture"></div>
</div><!-- End of Example -->
<!--End of Wraper in the Left Side (Product Images)-->
Then, I create some hidden div that will transfer all the contents insede the div to the #bigPicture div.
<ul id="pilihWarna" style="">
<li><img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1_7.jpg" width="10%">
<div id="bigHidden">
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg"></div>
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg"></div>
</div>
<div id="smallHidden">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg">
</div>
</li>
The ul which its id is #pilihanWarna has at least 5 li, which I used as clickable menus that I have been discussing here
That's when the slidshow and the zooming images functions are not working anymore.

You're using the same IDs multiple times, IDs should be unique. Given multiple elements with the same ID:
<div id="foo">One</div>
<div id="foo">Two</div>
<div id="foo">Three</div>
Searching the DOM for the elements will only ever return the first instance:
document.getElementById('foo'); // returns <div id="foo">One</div>
Start by removing the duplicated IDs and using a different selector (a class probably, but you could just use an element selector too) and then you might be getting somewhere.

jQuery Mobile listview in tabs and rendering problems

I'm writing a very simple app in PhoneGap + jQuery Mobile.
The aim is to become more confident in writing PhoneGap applications.
The app is very simple: it has an HomePage with a navbar.
The navbar has three buttons: Contacts, Calendar and Docs.
The buttons manage three tabs in the <div data-role="content"> element.
I have hidden those three tabs.
When the user tap on the navbar, I can navigate through the tab correctly.
Now, the problem: I successfully load the Contacts in the first tab but, when I navigate to it, I see only the dividers!
Instead, if I do not hide the Contact tab in the home, I can see the contacts correctly.
I'd like to load all the data while the user is still in the home page. So, while he decide what to do, the app should has enough time to load them.
The following screenshots show what I mean:
Why does this happens?
If you need my code, here it is (only significant part! ;) )
HTML:
<!-- Home jQueryMobile page -->
<div data-role="page" id="homePage" data-dom-cache="true">
<!-- Header -->
<div data-role="header" id="homePageHeader" data-position="fixed">
<h1>Frankie App</h1>
</div>
<!-- android style navbar. If the device is not an android, it
will not be shown -->
<div data-role="navbar" id="androidNavBar" hidden>
<ul>
<li>Contatti</li>
<li>Calendario</li>
<li>Documenti</li>
</ul>
</div>
<!-- Page content: it contains 4 tabs. The home + the 3 tabs reachable by the navbar-->
<div data-role="content">
<div id="homeLogger" hidden>Logger</div> <!-- I use this div as a console to debug -->
<div id="tabs">
<div id="homeTab">
<p align="center">
<img src="http://leaderchat.files.wordpress.com/2011/10/bigstock_cartoon_frankenstein_moster_as_151295541.jpg" height="280"/>
</p>
</div>
<div id="contactsTab">
<h1>Contacts</h1>
<ul id="contactList" data-role="listview" data-autodividers="true" data-inset="true">
</ul>
</div>
<div id="calendarTab" hidden>
<h1> Calendar </h1>
</div>
<div id="docsTab" hidden>
<h1> Documents </h1>
</div>
</div>
</div>
<!-- Footer -->
<div data-role="footer" id="homePageFooter" data-position="fixed">
<!-- iOS style navbar. If the device is not an iPhone, it
will not be shown -->
<div data-role="navbar" id="iOSNavBar" hidden>
<ul>
<li>Contatti</li>
<li>Calendario</li>
<li>Documenti</li>
</ul>
</div>
</div>
</div>
JS:
$('#homePage')
.bind('pageinit',
function(){
//Comment the next line to remove the logger from the home page
$("#homeLogger").show();
$("#homeLogger").text("jQuery Initialized");
//Registering to PhoneGap/Cordova lifecycle events
$(document).bind('deviceready', initialize)
});
// ============ //
// Initializers //
// ============ //
function initialize()
{
$("#homeLogger").text("device ready");
initNavBar();
initContacts();
}
function initNavBar()
{
//Retrieve the device platform using PhoneGap
platform = window.device.platform;
$("#homeLogger").text("detected platform: "+platform);
var navbar = null;
if(platform && platform == Constants.ANDROID){
navbar = $("#androidNavBar");
$("#homeLogger").text("show Android navBar");
} else {
//If the platform is not an android, I keep the bottom
//navbar because I prefer its look
navbar = $("#iOSNavBar");
$("#homeLogger").text("show iOS navBar");
}
if(navbar) //safety check to avoid null reference.
navbar.show(); //jQuery show() method
}
function initContacts(){
$("#homeLogger").text("loading contacts...");
var contManager = new ContactManager();
contManager.getAllContacts(["id", "name"],
function(retrievedContacts){
for(var i=0; i<retrievedContacts.length; i++){
var toAppend = "<li><a href='#'>"+retrievedContacts[i].name.formatted+"</a></li>";
$("#contactList").append(toAppend);
$("#homeLogger").text("element appended "+i);
}
$("#homeLogger").text("element "+$("#contactListview"));
$("#contactList").listview('refresh');
$("#homeLogger").text("list refreshed");
},
function(error){
$("#homeLogger").text("error: "+error);
});
}
// ========== //
// Navigation //
// ========== //
function showTab(tab)
{
$("#homeLogger").text("Selected Tab: "+tab);
$("#tabs").find("div").hide();
$("#"+tab.id).show();
}
Thank you very much for your help.
Rik

Have your tried to recreate the content page after dynamically adding content?
$('[data-role="content"]').trigger('create');
I gues your should do this b4 refreshing your ListViews (but after your for-loop has finished).

Dynamically created collapsible-set in jQuery Mobile

Okay, once i see the answer to this, I will feel stupid. I'm certain of that.
I've created this exactly the way I want to before, but I am refactoring my code for a new version right now. I am trying to dynamically create collapsible sets in jQuery Mobile, but my html does not render right.
<div data-role="header">
<h2>Playground</h2>
</div>
<div data-role="content">
<div data-role="button" id="addprimary" data-inline="true">Add 5</div>
<div data-role="collapsible">
<h4>Collapsible</h4>
<form id="makecollapsible">
</form>
</div>
</div>
<div data-role="footer">
<h4>Please, no applause</h4>
</div>
</div>
<script>
$('#addprimary').on('click', function () {
Markup.Collapsible();
});
var Markup = new Object();
Markup.Collapsible = function () {
$('#makecollapsible')
.append($('<div>')
.attr({ 'data-role': 'collapsible-set', 'id': 'primary' })
);
for (i = 0; i < 5; i++) {
($('<div>')
.attr({ 'data-role': 'collapsible', 'data-content-theme': 'c',
'data-collapsed': 'true' })
.html('<h4>' + i +'</h4>'))
.appendTo('#primary');
}
}
</script>
Could somebody please take a look at this http://jsfiddle.net/c2jLY/ and tell me what I have wrong? My <div>s with data-role='collapsible' are not rendering as collapsibles, which is also having an effect on the HTML I am trying to put in them later on.
Help is appreciated, thanks!

Inside Markup.Collapsible function and at the end of it, add the below. For collapsible-set, you need to tell jQM that you're enhancing a .collapsibleset() and combine it with .trigger('create').
$('#makecollapsible').collapsibleset().trigger('create');
Demo
I forgot to mention that when appending items dynamically, call enhancement methods on parent element; doing so, will enhance children elements. Thus, you don't need to use .collapsible().trigger('create') for each collapsible appended.

what i show here is a simple one but working:
<script type="text/javascript">
//dynamically make 10 collapsible items and append them to the collapsible-set
var jj = "SUPER item added..";
$('[data-role="content"]').append('<div id="set" data-role="collapsible-set"></div>');
var count;
for (count=0; count < 10; count++) { // div id should be from id='c0' to 'c9'
$("#set").append('<div id="c' + count + '" data-role="collapsible">');
$("#c" + count.toString()).append('<h3>Adding element_' + count +'</h3>');
$("#c" + count.toString()).append(jj + 'count ' + count + '</div>');
}
// either one is tested working below:
// $('[data-role="content"]').trigger('create');
$( "#set" ).collapsibleset( "refresh" );
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<!------------------------page 1 ListView template-->
<div data-role="page" id="page01">
<div data-role="header" data-theme="b" data-position="fixed">
<h2>-- DEMO -- </h2>
</div>
<div data-role="content" id="content">
</div>
</body>