I got JPanelMenu working on a button click, using the methodology described in the manual.
I am using two Hammer.JS actions on my mobile webapp, swipe right to return to the index page, and would like to use swipeleft to show the menu.
Here is the Hammer code, with the JPanelMenu trigger.
This does activate the menu, however, once the menu is closed, and then reopened with another swipe, the width of the menu appears to have doubled and filled with whitespace, the width increases with each subsequent activation.... Any ideas?
<script type="text/javascript">
var hammer = $('body').hammer();
hammer.on('swipeleft', function(event) {
var jPMx = $.jPanelMenu();
jPMx.on();
jPMx.trigger(true);
});
</script>
Commenting out the jPmx.on() seemed to fix this, to allow both swipe and click a button to activate the menu.
<script type="text/javascript">
var hammer = $('body').hammer();
hammer.on('swipeleft', function(event) {
var jPMx = $.jPanelMenu();
// jPMx.on();
jPMx.trigger(true);
});
</script>
Related
I'm working on a responsive website. There is one type of navigation element that is an clickable image link. I've got many of these on the page. On a normal desktop computer when you mouseover this image it changes color (+ more), and changes back when you mouseout. When clicked, you are linked to a new webpage. Right now this is coded via a simple JavaScript Event handler.
<a href="http://myfakewebsite.com/next_page_1.html">
<img onmouseover="{ this.src = 'image_1_red.png'; }"
onmouseout="{ this.src='image_1_normal.png'; }"
src='image_1_normal.png'
/>
</a>
The issue is when a iPad user taps a clickable event, the following elements are sent.. mouseover, mousemove, mousedown, mouseup and click. And that mouseover event is definitely causes me troubles. There is a fraction of a second where the image_1_normal image disappears and you get a visible icon (white question mark in box with blue background and white border) for a period of time before the site snaps to the new URL. There is not enough time for the image_1_red to appear. The whole affect looks odd. Its noticeable enough that my customer isn't happy. Is there any way to mitigate this issue? Is there a way in JavaScript to say...
if this is a mobile touch device, then skip the whole mouseover thing?
Is there a way to do this inline via Event Handler, or am i going to have to create event listeners for all of the elements in script en mass?
So I did an update to code:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init() {
var image_1 = document.getElementById("image_1_nav");
var image_2 = document.getElementById("image_2_nav"); .. etc...
if (!("ontouchstart" in document.documentElement)){
image_1.addEventListener("onmouseover", function(){
this.src="image_1_red.png";}, false);
}
if ("ontouchstart" in document.documentElement){
alert( "Mobile device with Touchstart"); }
}
</script>
The alert test works fine on ipad not on desktop as expected.
Now I'm unable to get the onmouseover function to register...
First off, the system didn't like if (!"ontouchstart" in document.documentElement){ I had to change that to if(!("ontouchstart" in document.documentElement)){ before it would register correctly. I'm now stuck trying to figure out why I can't see the event listeners for onmouseover....
So from what I can see, there appears to be no way to use an 'inline' event handler to avoid OnMouseOver when a website is viewed on a mobile device. This code seems to work:
<img src='image_1_normal.png' />
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init() {
var image_1 = document.getElementById("image_1_nav");
var image_2 = document.getElementById("image_2_nav"); //.. etc...
if (!("ontouchstart" in document.documentElement) &&
! (navigator.maxTouchPoints > 0) &&
! (navigator.msMaxTouchPoints > 0) ){
image_1.addEventListener("mouseover", function(){
this.src="image_1_red.png";}, false);
image_1.addEventListener("mouseout", function(){
this.src="image_1.png";}, false); // .. etc...
}
}
</script>
So on a mobile device (iPad) the original image never gets modified at all during a click, No weird momentary popup icons, no miffed customers. Oh, and many thanks to Manuel Ignacio López Quintero for this blog entry. and Patrick H. Lauke and Robert Nyman for their article on detecting touch.
I trying to use this menu Bootstrap Collapsible Side Menu but something doesn't work properly. There is + sign and - for open and close. When I open first menu + become - as must be but when I click on second menu first must close and - must become +. I hope you get what I mean. This doesn't work properly. Also when I click on second menu the icon that is front of the name become - also.
I've tried to recreate this menu in jsfiddle but doesn't work there. Doesn't open the menu but you can see what happen with + and - signs. If you click on both links they are with -.
Here is the jsfiddle. I didn't work with jsfiddle before.
Looks like you just forgot to load jquery, or you are loading it after bootstrap. It works fine if you load it properly.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
http://jsfiddle.net/acidrat/BP6Wh/2/
Check you browser console for error messages.
EDIT
Ok, now i get it. You will have to work with Bootstrap collapse events that are triggered after collapsing.
$('#menu-bar').on('shown.bs.collapse', function () {
var currentlySelectedElement = $(this).find('.collapse.in');
var targetAnchor = $('[data-target="#' + currentlySelectedElement.attr('id') + '"]');
$('[data-target="#' + currentlySelectedElement.attr('id') + '"]').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
});
$('#menu-bar').on('hidden.bs.collapse', function () {
var currentlyCollapsedElements = $(this).find('.collapsed');
currentlyCollapsedElements.each(function () {
$(this).find('i.fa-minus').removeClass('fa-minus').addClass('fa-plus');
});
});
Here the updated jsFiddle: http://jsfiddle.net/acidrat/BP6Wh/5/
I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.
Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.
Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
I'm trying to have a slideshow with next / previous buttons. I'm using NivoSlider for the cool transitions, and raphaelJS for animated next / previous buttons. My only issue is that there is no built in way to give an element to Nivoslider that represents the next button. Because my element is a triangle that animates I need someway to let NivoSlider know that I want $(triangle.node) to represent next & previous. The library is private (I think that's how you express that) so it can't see the triangle.node global. Any ideas?
Add this code before you initialize Nivo Slider and replace the parameters with your triangleNodePrev / Next. This has the advantage of disabling the default action on your links so that if you use href="#" the browser doesn't scroll back to the top of the page.
$('#previousButton, #nextButton').on('click', function (e) {
// Prevent the link from being followed
e.preventDefault();
// Initialize variables
var buttonId = this.id,
buttonClass = ('previousButton' == buttonId) ? '.nivo-prevNav' : '.nivo-nextNav';
// Trigger the slider button
$('.nivo-directionNav').find(buttonClass).click();
});
$("#triangleNodePrev").click(function(){$(".nivo-directionNav .nivo-prevNav").click()})
$("#triangleNodeNext").click(function(){$(".nivo-directionNav .nivo-nextNav").click()})
That should do it
but in any case the commands you need are
$(".nivo-directionNav .nivo-prevNav").click()
and
$(".nivo-directionNav .nivo-nextNav").click()
<script type='text/javascript'>
$(document).ready(function() {
jQuery("#previousButton').click(function (e) {
e.preventDefault();
jQuery(".nivo-directionNav .nivo-prevNav").click();
});
jQuery("#nextButton').click(function (e) {
e.preventDefault();
jQuery(".nivo-directionNav .nivo-nextNav").click();
});
});
</script>
Hi everybody,
I have some issue with one of my project. I'm currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.
After that i've created another iframe who appear when i click on the "Menu" Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.
Well now let me explain my problem :
When i click on the "dropMenuButton" i execute this code :
$( "#dM1").click( function() {
dropMenu('dropMenu1', $(this).position().left);
});
To be clear the function "dropMenu" will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it's allready activated or not.
Here is the executed code by the "dropMenu function"
if(document.getElementById("dropMenu"))
{
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
}
else
{
var body = $('body'),
MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');
body.append(iframe);
$("#dropMenu").hide().slideDown(800);
// Shift the menu (Left)
$("#dropMenu").css({left: marginLeft+'px'});
}
So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.
I've tried a lot of things but nothing work...
Hope somebody will provide me some help !
Thanks in advance.
Edit (Injection) :
I've tried to inject the javascript like this :
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
injectJs = $('$("#dropMenu").click( function(e) {' +
'e.stopPropagation();' +
'});' +
'</script>');
body.append(injectJs);
But it didn't seems to inject on the page. It should have a problem somewhere...
Can't you just add a click event on the document? Then on the actual drop down menu (or any other events where you don't want to hide the drop down) prevent any clicks from bubbling up:
$(document).click(function(){
// hide drop down clicking anywhere on page:
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
});
$("#dropMenu").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});
It works great but like this :
$(document).click(function(){
// hide drop down clicking anywhere on page:
dropMenu('slideUp', 0);
});
$("#dM1").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
dropMenu('dropMenu1', $(this).position().left);
});
Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?