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
Related
My menu in wordpress has the following code:
<nav role='navigation'>
<div id="menuToggle" onclick="lockScroll()" >
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
) );
?>
</ul>
</div>
</nav>
And this jQuery function to disable scroll in body when #menuToggle is clicked:
<script>
jQuery(function(lockScroll) {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
}
else {
$('body').addClass('lock-scroll');
}
});
</script>
But it always gives me the error
Uncaught TypeError: $ is not a function at
HTMLDocument.
Im not exactly sure what 'open' means in your case. This code should most likely do the right thing or push you in the right direction:
jQuery( '#menuToggle' ).click( function() {
jQuery( 'body' ).addClass( 'lock-scroll' );
} );
jQuery( document ).on( 'mousedown', function( e ) {
var c = jQuery('#menuToggle');
if( !c.is( e.target ) && c.has( e.target ).length === 0 ) {
jQuery( 'body' ).removeClass( 'lock-scroll' );
}
} );
If you click #menuToggle the lock-scroll class is added (first part). As soon as you click outside of #menuToggle it will be removed (second part).
Please Try This:-
jQuery(function(lockScroll) {
if (jQuery('body').hasClass('lock-scroll')) {
jQuery('body').removeClass('lock-scroll');
}
else {
jQuery('body').addClass('lock-scroll');
}
});
This way a can disable the scroll when click
<script>
jQuery('#menuToggle').click( function(){
jQuery( 'body' ).addClass( 'lock-scroll' );
});
</script>
How can i remove class when click again?
I am creating big form and would provide button navigation between sections for accessibility.
It means that you could expand/collapse next or previous section by buttons navigation.
However, when you switch section, current section is hidden (and next one is showed) by display CSS property, so just used button is anymore focused as it's not visible.
Take a look on this JSFiddle or code below to understand issue.
HTML:
An anchor
<article>
<header>First box</header>
<main>
This is first box.
<label><input type="radio" class="focusable" />This is input</label>
<button class="next focusable">Next box</button>
</main>
</article>
<article class="box-hidden">
<header>Second box</header>
<main>
This is second box.
<button class="focusable">Extra button</button>
<label><input type="radio" class="focusable" />This is input</label>
<button class="prev focusable">Previous box</button>
<button class="next focusable">Next box</button>
</main>
</article>
<article class="box-hidden">
<header>Third box</header>
<main>
This is third box.
<label><input type="radio" class="focusable" />This is input</label>
<button class="prev focusable">Previous box</button>
</main>
</article>
An anchor
CSS:
.box-hidden main {
display: none;
}
/* Only cosmetic below */
article { background: #ddd; margin: 10px 0; }
header { background: #ccc; }
button:focus { outline: 2px solid blue; }
JQuery:
$( 'body' ).on('click', '.next', function( event ) {
event.preventDefault();
var next = $( this ).closest( 'article' ).next( 'article' );
$( 'article' ).addClass( 'box-hidden' );
$( next ).removeClass( 'box-hidden' );
});
$( 'body' ).on('click', '.prev', function( event ) {
event.preventDefault();
var prev = $( this ).closest( 'article' ).prev( 'article' );
$( 'article' ).addClass( 'box-hidden' );
$( prev ).removeClass( 'box-hidden' );
});
When you use next or previous button, focus is lost and you have to start again from page begin. It can't happen.
My solution is to find closest focusable (it sucks, because I use class due first focusable could be input either another button) in opened section and focus it:
JSFiddle or add to JQuery:
$( next ).find( '.focusable' )[0].focus();
At end of both functions, analogously replace $( next ) to $( prev ) in second one.
So it will look like:
//[...]
$( next ).removeClass( 'box-hidden' );
$( next ).find( '.focusable' )[0].focus();
});
But I am not sure is it right way, isn't it confuse user navigating by focusable elements?
Maybe I should do it another way?
Note: Buttons are appended by JS, so non-JS users just dont't use them.
Thanks in advance for advices!
I believe you have uncovered a usability issue, not an accessibility issue. I would replace the next and previous buttons with expand/collapse toggles for these sections. This would immediately solve your accessibility issue (because these buttons would always be visible) and it would be a UI model that users are familiar with and solve (what I believe to be) a non-standard and confusing interaction model.
Here is your JSfiddle updated for this implementation (you can probably find better icons than I used) http://jsfiddle.net/zwLLrg9d/7/
I also changed this so that there is correct use of sectioning content. Multiple instances of a <header> element are definitely not recommended.
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?
I'm trying to set up a toggle where when one div is toggled to visible, the other will toggle to hidden. Clicking on "trigger one" toggles div "one" and clicking on "trigger two" toggles div "two". I'm basically looking for a way to make sure that only one of the divs is visible at one time (div one and div two should never both be visible, although both can be hidden).
I'm assuming some kind of if statement but my javascript is not great! Any help would be much appreciated.
HTML:
<a id="trigger-one" href="#">Trigger one</a>
<a id="trigger-two" href="#">Trigger two</a>
<div class="one">Here's one</div>
<div class="two">Here's two</div>
jQuery:
$( document ).ready(function() {
$( "#trigger-one" ).click(function() {
$( ".one" ).fadeToggle( "125", "swing" );
return false;
});
});
$( document ).ready(function() {
$( "#trigger-two" ).click(function() {
$( ".two" ).fadeToggle( "125", "swing" );
return false;
});
});
Here's one way:
$("a").click(function () {
$('div').eq($(this).index()).fadeToggle("125", "swing");
$('div:not(":eq('+$(this).index()+')")').fadeOut()
});
jsFiddle example
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();
} );