We Keep Coding

How to connect navigation links to jquery.mobile swiping pages?

I'm trying to create a webpage primarily for mobile. User navigates from page to another by swiping left or right. I have done this with jQuery mobile.
Now I would like to connect it to fixed navigation bar at the bottom of the screen, so that when user swipes the activated manu item changes accordingly. Can somebody give me a code for that?
Also I would like to make it so that when user clicks on a menu item, page changes with the same slide animation as when swiping. Now I have the animation on second menu item in a way that when it's clicked, the animation occurs but the sliding page is always the next one and not the exact page I want. So if user is on front page and then clicks on third menu item, it shows an animation of second page sliding to view and then jumps to third page, when it should automatically show animation of third page when you click third menu item.
Here is the swipe page script
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
transition: "slide"
});
}
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
transition: "slide",
reverse: true
});
}
$( document ).one( "pagecreate", "#page1", function() {
$( document ).on( "swipeleft", ".ui-page", function( event ) {
var next = $( this ).jqmData( "next" );
if ( next ) {
navnext( next );
}
});
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if (prev) {
navprev( prev );
}
});
$( document ).on( "click", ".next", function() {
var next = $( ".ui-page-active" ).jqmData( "next" );
// Check if there is a next page
if ( next ) {
navnext( next );
}
});
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if ( prev && ( event.target === $( this )[ 0 ] ) ) {
navprev( prev );
}
});
$( document ).on( "click", ".prev", function() {
var prev = $( ".ui-page-active" ).jqmData( "prev" );
if ( prev ) {
navprev( prev );
}
});
});
And this is my structure where I have added the bad animation to menu item News
<div id="page1" data-role="page" data-prev="#page3" data-next="#page2">
<div data-role="content" class="sivu">
I am page 1
</div>
</div>
<div id="page2" data-role="page" data-prev="#page1" data-next="#page3">
<div data-role="content" class="sivu">
I am page 2
</div>
</div>
<div id="page3" data-role="page" data-prev="#page2" data-next="#page1">
<div data-role="content" class="sivu">
I am page 3
</div>
</div>
<div class="scrollmenu" id="navbar" data-role="footer">
Home
News
Contact
About
Home
News
Contact
About
</div>
And here is link to code pen (it's not working for some reason)
https://codepen.io/pinjakumpulainen/pen/YMbNRx

jQuery ToggleClass optimisation and features

I have worked on the below code to control a series of 3 sidebars. As you can see, the code isn't particularly efficient as I've simply repeated the content for each class. I'd like to streamline this if possible to just one function?
I'd also like to add the functionality of only ever allowing one sidebar to be active. So if sidebar .artists is .active and I click sidebar .about, the .artists sidebar will collapse.
Thanks.
JQuery
$(function() {
$( ".artists" ).click(function() {
$( ".sidebar.artists" ).toggleClass( "active" );
});
});
$(function() {
$( ".about" ).click(function() {
$( ".sidebar.about" ).toggleClass( "active" );
});
});
$(function() {
$( ".history" ).click(function() {
$( ".sidebar.history" ).toggleClass( "active" );
});
});
HTML
<nav>
<ul>
<li class="artists"><a>Artists</a></li>
<li>News</li>
<li class="about"><a>About</a></li>
<li class="history"><a>History</a></li>
</ul>
</nav>
<nav class="sidebar artists">
Sidebar Artists content
</nav>
<nav class="sidebar about">
Sidebar About content
</nav>
<nav class="sidebar history">
Sidebar History content
</nav>

You can use this to optimize it:
$(function() {
$( ".sidebar" ).click(function() {
$(this).toggleClass( "active" );
$(".active").toggleClass( "active" );
});
});
As per markup code I would suggest you to add an ID to the main ul as main-nav:
$(function() {
$( "#main-nav li" ).click(function() {
var cls = this.className;
$(this).addClass( "active" )
.siblings("li").removeClass( "active" );
$(".sidebar."+cls).slideToggle()
.siblings(".sidebar").slideUp();
});
});

$('.artists, .about, .history').click(function() {
var subClass = '';
if($(this).hasClass('artists')) {
subClass = 'artists';
} else if($(this).hasClass('about')) {
subClass = 'about';
} else if($(this).hasClass('history')) {
subClass = 'history';
}
$('.sidebar:not(.'+subClass+')').removeClass('active');
$('.sidebar.'+subClass).toggleClass('active');
});
https://jsfiddle.net/aua0wxm9/3/

As you have given the markup, I have changed my code.
Try this:
I have checked this code and it works properly
JS
$(document).ready(function(){
$('ul li').on('click',function(){
$('.sidebar').hide();
$(this).parent().parent().siblings("." +$(this).attr('class')).show();
});
});
Alternatively using active class
$('ul li').on('click',function(){
$('.sidebar').removeClass('active');
$(this).parent().parent().siblings("." +$(this).attr('class')).addClass('active');
});
Here's the fiddle example:
http://jsfiddle.net/5angwsnb/3/
Hope it works well for you too!
Update:
CSS:
.sidebar{
display:none;
}
.active{
//your transition here
}

Make li item boxes pop out in order jQuery

I have a footer list:
<footer id="footer">
<ul>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xxx</p>
<p> xxxx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx </p>
<p> xx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx</p>
<p> xxx</p>
</li>
</ul>
</footer>
that pops out on click to two separate links, like so:
$(document).ready(function() {
$( "#add" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
$(document).ready(function() {
$( "ul li:eq(3)" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
I would like these ul boxes, after their current popout link is clicked, to either fill with content one after the other in order, or have the boxes themselves pop out one at a time. Input wherever I can do better is helpful as well; I'm a rookie. Bonus: how to have the boxes revert in order when those two links in question are clicked again to close? Thanks all.
edit: the two links that pop out the footer are here, the contact link and the phone image:
<section id="side">
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<img id="add" src="images/phoner.png"></img>
</nav>
</section>

Something like this maybe?
$(document).ready(function() {
var $footer = $("#footer").hide(),
$footerItems = $footer.find("ul li").hide(),
footerState = 0;
$("#add, .sidebar ul li").click(function (e) {
e.preventDefault();
footerState = !footerState;
var method = footerState ? 'show' : 'hide';
if(footerState) $footer.show();
$footerItems.get().reduce(function (p, li) {
return p.then(function() {
return $(li)[method]('slow').promise();
});
}, $.when()).then(function() {
if(!footerState) $footer.hide();
});
});
});
DEMO

https://jsfiddle.net/m173gxvg/3/
Something like this? If yes, here are the modifications:
Remove the display:none from the footer css
Add the display:none to the footer ul li css
Modify the javascript code
Here's the js to use after the click:
toggleTimer=500;
$( "#footer" ).find("ul").find("li").each(function() {
jQuery(this).toggle(toggleTimer);
toggleTimer=toggleTimer+500;
});

I think you want to click on each one and then show the next one, is that right?
Then you can use the .next() jquery property to assign the click listener to toggle the next element.
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(function() {
//if none are visible, show the first one, else hide them all
if ($('#footer').find('li').first().css('display') == 'none' ) {
//show the fist LI
$( "#footer" ).find('li').first().toggle( "fast" );
} else {
//hide them all
$('#footer').find('li').hide();
}
});
//add listener to each LI to toggle the NEXT one
$('#footer').find('li').click(function(){
$(this).next().toggle("fast");
});
});
... after your comment...
OR You can show the FIRST hidden one on each click like this:
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(
function() {
//if NO LI are hidden, hide them all, else show one at a time
if ( $('#footer').find('li:hidden').size()==0 ) {
//hide them all
$('#footer').find('li').hide();
} else {
//show the first hidden LI
$('#footer').find('li:hidden').first().show('fast');
}
}
);
});
Is that what you're looking for?

Trying to make multiple lightboxes work in javascript

I've been following a tutorial for a JS lightbox but I'm not fully understanding how to be able to use this on multiple divs.
What I want is the same lightbox but I want the content inside it to be different depending on what button/link I press.
Any help would be appreciated. I'll post the relevant snippets below.
HTML:
<ul id="portfolioitems">
<li><img src="images/digitaltattoo.jpg"><div>Digital Tattoo</div></li>
<li><img src="images/flashgame.jpg"><div>Flash Game - Deserted</div></li>
<li><img src="images/photos.jpg"><div>Photography</div></li>
<li><img src="images/bumper.jpg"><div>Video Bumper</div></li>
<li><img src="images/fbfanaticism.jpg"><div>Facebook Fanaticism</div></li>
<li><img src="images/oldwebsite.jpg"><div>Business Card Website</div></li>
</ul>
<div id="1">
<div class="contentwindowwrapper">
<div class="contentwindow">
<div class="contentwindowclose">x</div>
4365786
</div>
</div>
</div>
<div id="2">
<div class="contentwindowwrapper">
<div class="contentwindow">
<div class="contentwindowclose">x</div>
reerrhr
</div>
</div>
</div>
JS:
$(document).ready(function(){
var divnumber = $(this).attr("href");
$('#1').click(function(){
$('.contentwindowwrapper, .contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
$('.contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
$('#1, .contentwindowwrapper, .contentwindow').css('display', 'block');
$('.contentwindowwrapper, .contentwindow').css('z-index', '1');
});
$('#2').click(function(){
$('.contentwindowwrapper, .contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
$('.contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
$('#2, .contentwindowwrapper, .contentwindow').css('display', 'block');
$('.contentwindowwrapper, .contentwindow').css('z-index', '1');
});
$('.contentwindowclose').click(function(){
close_contentwindow();
});
$('.contentwindowwrapper').click(function(){
close_contentwindow();
});
});
function close_contentwindow()
{
$('.contentwindowwrapper, .contentwindow').animate({'opacity':'0'}, 100, 'linear', function(){
$('.contentwindowwrapper, .contentwindow').css('display', 'none');
$('.contentwindowwrapper, .contentwindow').css('z-index', '-1');
});
}
Thanks

No question, but hey here's an answer. This one is working but comes without any styling.
A simple jQuery lightbox plugin:
jQuery.fn.myLightbox = function() {
return this.each( function() {
var lightboxContentLink = jQuery( this ).attr( 'href' );
if( jQuery( lightboxContentLink ).length ) {
/* get contents from another element with ID lightboxContentLink */
var lightboxContent = jQuery( lightboxContentLink );
}
else {
/**
* #todo implement loading from URL
*/
var lightboxContent = 'some URL content';
}
var windowWrapper = jQuery( '<div class="contentwindowwrapper" />' );
var window = jQuery( '<div class="contentwindow" />' );
var windowHandle = jQuery( '<div class="contentwindowclose">close</div>' );
/* close popup on handle click */
windowHandle.click( function( event ) {
windowWrapper.hide();
} );
/* add content and window handle to popup */
window.append( lightboxContent, windowHandle );
/* wrap window with wrapper */
windowWrapper.append( window );
windowWrapper.hide();
/* insert new popup into DOM */
jQuery( 'body' ).append( windowWrapper );
jQuery( this ).click( function( event ) {
/* don't follow link */
event.preventDefault();
/* close any popups that are still open */
jQuery( '.contentwindowwrapper' ).hide();
/* fade-in popup */
windowWrapper.show( 300 );
} );
} );
};
The required HTML: (complete)
<ul id="portfolioitems">
<li>Open C1</li>
<li>Open C2</li>
<li>Open C3</li>
</ul>
<div id="c1">This is the content for popup C1.</div>
<div id="c2">This is the content for popup C2.</div>
<div id="c3">This is the content for popup C3.</div>
The call/setup (jQuery again):
jQuery( document ).ready( function( $ ) {
$( '#portfolioitems a[href]' ).myLightbox();
} );

How to detect content change event on a div

I am trying to make an editor everything working fine till now, but now I need to make a handler which could detect any change made in a div or any content edited in the div
<?php $row="testing content" ?>
<!-- my editor section-->
<div id="editor">
<div id="options">
<span><a id="iimg">Insert Image from gallery</a></span>
<span>Upload image to gallery</span>
<span><a id="iheading">Heading</a></span>
</div>
<div id="product_descriptioncontent" contenteditable="true"><?php echo $row; ?>
</div><!-- viewable editor -->
<input type="hidden" name="textareacontent" value="" id="textareacontent" >
<!-- hidden field to submit values -->
</div>
<!-- end of editor section -->
<div id="imc"></div> <!-- image gallery loading section -->
<script>
$(document).ready(function(){
$('#iheading').click(function(){
$('#product_descriptioncontent').append('<h1>Heading</h1>');
});
$('#iimg').click(function(){
$('#imc').load('imagegallery.php',function(){
$('#gallery img').on('click',function(){
$('#product_descriptioncontent').append('<img src="http://localhost/sites/site_pics/otherpic/1.png"><br> ');
});
});
});
$('#product_descriptioncontent').change(function(){
alert("pppp");// how to capture this event
});
});
</script>
I have placed a bit of my code at jsfiddle http://jsfiddle.net/bipin000/UJvxM/1/
thanks for your precious time

Try adding a handler for DOMCharacterDataModified. Might be a cleaner solution.

Do you like this? http://jsfiddle.net/Ralt/hyPQC/
document.getElementById( 't' ).onkeypress = function( e ) {
var evt = e || window.event
alert( String.fromCharCode( evt.which ) )
}​
It's not waiting for a change event, it's kind of pointless.
Instead, it's listening to the onkeypress event. Everytime a user changes the content of this div (by adding a character to it), it triggers the event.
You can also see how to get the character clicked (using String.fromCharCode( evt.which )).
PS: a full jQuery solution for your specific case would be this:
$( '#product_descriptioncontent' ).on( 'keypress', function() {
$( '#your-hidden-input' ).val( $( this ).text() )
// Or
$( '#your-hidden-div' ).text( $( this ).text() )
} )

You can bind a custom event to the div and trigger that event upon change
Demo in Stack Snippets and jsFiddle:
$(function() {
$('#wrapper').bind("contentchange", function() {
console.log("Captured content change event");
});
$("#btn").click(function() {
$('#wrapper').html("new value").trigger("contentchange");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="wrapper"></div>
<input type="button" id="btn" value="click here">