I have an image in the screen, which covers 80% of the screen.
I want to move it left and right on swipe of the button. i am trying to do it like this
$("#movebtn").swiperight(function() {
$('#moveimage').animate({
'marginLeft' : "+=2px"
});
});
$("#movebtn").swipeleft(function() {
$('#moveimage').animate({
'marginLeft' : "-=2px"
});
});
But when i swipe on a button instead of moving left/right image is zooming in and out.
What's the mistake i am doing?
Thanks:)
try using margin-left instead of marginLeft
Related
I've tried a lot of different things I've seen online (tutorials and videos) but I can't seem to get this to work.
What I have is a hero banner at the top with 100% width and height. The menu has been hidden up using -webkit-transform: translate(0,-100%); and once the user scrolls down to the bottom of the hero banner, the menu will then appear, sliding down using -webkit-transform: translate(0,0); within an addClass. I have used ease to animate it. However, my javascript isn't working.
Here is a jsfiddle
$(document).ready(function(){
var nav = $(".slide-nav-container");
var banner = $(".hero");
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= banner.outerHeight()) {
nav.addClass("slide-menu");
} else {
nav.removeClass("slide-menu");
}
});
});
You are only checking for the height of the banner, you need to add it to the position too.
windowpos >= banner.outerHeight()+banner.offset().top
banner.offset().top will return you the position of the banner on your site, adding its height will be the bottom of the banner.
We have a simple mobile app running in Mobile Safari (MS) on iOS. When the user scrolls down the page n pixels, a "top" button slides up from the bottom. The top button is fixed position. Problem is, when you start scrolling in MS, the navigation and toolbar UI is hidden. When you tap the "top" button, it reveals the bottom toolbar and a second tap is required to tap the "top" button. Is there any way to disable the default "tap on the bottom part of the viewport to reveal the toolbar" behavior so our top button works as expected (i.e. jumps to the top of the page with one click, not two?
No there is not. You can control the content of your webpage but not the behavior of the safari app.
The simple solution here is to add about 50px padding-bottom on your bottom most div. Safari seems to think that you are trying to access the bottom navigation bar, unless you click well above the bottom area. With extra padding at bottom, the user will click much higher on the page (not always, but in general).
Mika and typeoneerror are correct, but there is a workaround.
The best workaround solution I found (that doesn't require minimal-ui) is to force the bottom navigation of iOS Safari to always stay open/visible. That way, clicks to the bottom of the window never open the bottom navigation since it's always open.
To do that, you just need to apply some CSS and browser targeting with JS. Detailed steps on how:
How might one force-show the mobile Safari bottom nav bar to show programmatically?
Buttons aligned to bottom of page conflict with mobile Safari's menu bar
For iOS 7.1, you can set this in your header to minimize the UI:
<meta name="viewport" content="width=device-width, minimal-ui">
It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
Here's how I'm dealing with this. With a position:fixed;bottom:0 toolbar of my own, I'm adding 44px offset to it (with a semi-transparent buffer zone) shortly after the safari toolbar is hidden (as this is the scenario where a tap near the bottom will reveal the toolbar again).
var min_inner_height = false;
var max_inner_height = false;
var passiveIfSupported = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, "passive", {
get: function () {
passiveIfSupported = {
passive: true
};
}
}));
} catch (err) {}
document.addEventListener('scroll', function (e) {
var win_inner_h = window.innerHeight;
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
if (min_inner_height === false || win_inner_h < min_inner_height) {
min_inner_height = win_inner_h;
}
if ((max_inner_height === false || win_inner_h > max_inner_height) && win_inner_h > min_inner_height) {
max_inner_height = win_inner_h;
}
if (max_inner_height !== false && max_inner_height == win_inner_h) {
addElementClass(document.body, 'safari-toolbars-hidden');
} else {
removeElementClass(document.body, 'safari-toolbars-hidden');
}
}
}, passiveIfSupported);
This basically adds the .safari-toolbars-hidden class to the <body> sometime around when they disappear due to the user scrolling down the page.
At this point, I move my own toolbar up the page:
.my-bottom-toolbar {
bottom: 0px;
position: fixed;
}
#supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
.my-bottom-toolbar {
box-shadow: 0 44px 0 rgba(255, 255, 255, 0.8);
transition: bottom 0.15s ease-in-out;
}
.safari-toolbars-hidden .my-bottom-toolbar {
bottom: 44px;
}
}
Hope this helps someone!
Instead of offsetting by a further 44px, you could also add an extra 44px of bottom padding if that works better for your case.
The best solution for me comes from this article.
My solution is with react but simply translated from the articles solution.
import { useWindowHeight } from '#react-hook/window-size/throttled';
//... inside your component
const height = useWindowHeight();
React.useEffect(() => {
const vh = height * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}, [height]);
body {
/* other styles */
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
Now when the innerHeight changes the hook is fired and the height variable is adjusted. The window's innerHeight changes when the safari url bar and bottom navigation are hidden so my app fits just right for both situations.
The following example is probably the easiest way to try and explain the effect I'm trying to achieve:
http://jsfiddle.net/qSscJ/2/
Code:
$(function() {
$('#handle').click(function() {
$('#box').toggle('slide', { direction: 'right' });
});
});
Click on the blue handle to make the entire red box collapse. How do I keep the blue handle visible after the box is collapsed (while keeping the handle anchored to the edge of the box)? I'm open to other jQuery UI APIs to achieve this effect.
You could do just animate the width directly so the element doesn't get marked as hidden at the end of the animation:
$(function() {
$('#handle').click(function() {
$('#box').animate({width: "0px"}, 1000);
});
});
But, it would be much better to change the design so that the blue tab was not contained within the box you're closing like here: http://jsfiddle.net/jfriend00/gKQrv/.
$(function() {
$('#handle').click(function() {
var box = $('#box');
var targetWidth = box.width() > 0 ? 0 : 150;
box.animate({width: targetWidth + "px"}, 1000);
});
});
I have a chart where i allowed zooming in/out.
Each time user zoom in/out "Reset Zoom" appears.
Now I have added a new customize button where i need to show X most updated column data.
I have changed categories and data, but need also to reset the zoom.
Can this be done ? I still want to keep the "Reset Zoom" when user tries to zoom in/out.
PS: I tried doing this.zoomOut() but then the "Reset Zoom" appeared :(
Regards
Chanan
Pawel's suggestion of calling
chart.xAxis[0].setExtremes(null,null);
does work, btw, as shown here: http://jsfiddle.net/tvHg6/
However, although the chart zooms out, the resetZoom button is still hanging around, not sure how to hide it. Calling chart.resetZoomButton.hide() hides it, but it does so permanently.
As suggested here
chart.zoom()
But keep in mind that calling chart.zoom() does not trigger chart.events.selection event. Which is triggered if you click on "Reset button" manually or programmatically $('.highcharts-button').click();
If you want to reset the zoom on an external button click then do it as follows:
$("#YourOwnZoomBtnID").click(function(){
$('.highcharts-button').click();
});
If you want to hide the Inbuilt Reset Button of highcharts then you can do it as follows:
xAxis: { categories: xAxisCategories
,events: {
afterSetExtremes: function() {
$('.highcharts-button').hide();
}
}}
jsfiddle example is here: jsfiddle
Thanks
Kalyan
I just called the button's click event and it worked fine.
given: v_chart is variable for Highcharts chart;
if (typeof v_chart.resetZoomButton !== 'undefined') {
v_chart.resetZoomButton.element.onclick();
}
hide the original reset button
chart: {
resetZoomButton: {
theme: {
display: 'none'
}
}
}
take care of the event
buttons: {
resetButton: {
symbol: 'url(redo_icon.svg)',
_titleKey: "resetZoom",
y: 20,
x: -20,
onclick: function () {
this.xAxis[0].setExtremes(null,null);
this.yAxis[0].setExtremes(null,null)
}
}
}
We had a similar situation - user zooms, we add a 'save this zoom stage' button, user clicks the button, we save the new min/max time, but now we have to make the reset zoom button disappear.
This code did it and the button returns if the user zooms even further afterwards:
chart.resetZoomButton.hide();
chart.resetZoomButton = chart.resetZoomButton.destroy();
I am trying to change the opacity of the image after I click the red button
instead of adding the different image, and I should not see the red button on the new image
My JS code is below.
http://jsfiddle.net/mwPeb/7/
<script>
$(document).ready(function () {
$(".specialHoverOne").hover(function () {
// alert("i am here");
$(".ctaSpecialOne").css("visibility", "visible");
},
function () {
$(".ctaSpecialOne").css("visibility", "hidden");
});
$(".ctaSpecialOne").click(function (e) {
alert("clicked");
e.preventDefault();
//$(this).closest('.specialHoverOne').unbind("mouseenter").end().parent().siblings('a').children("img").attr("src", //"http://imgs.zinio.com/magimages/62898189/2012/416242497_200.jpg");
$(this).css({
'opacity': 50
});
});
});
</script>
I'd spend some quality time cleaning up the coding here, it's a bit difficult to find anything and the structure is a bit hard to follow.
If I'm understanding correctly, I believe this is the line you need to make the image above the red button change opacity when said red button is clicked.
$(this).parent().prev().prev().css({'opacity':.5});
More specifically;
$(".ctaSpecialOne").click(function (e) {
e.preventDefault();
$(this).parent().prev().prev().css({'opacity':.5});
});
http://jsfiddle.net/mwPeb/11/
You want the opacity of the red button to change on click? Or the image above it? For starters, to set the opacity, you would change your line:
$(this).css({'opacity':50});
to:
$(this).css({ opacity: 0.5 });
In your current fiddle, you'll see that sets the opacity of the red button. If you want it to set something else, you now have the syntax.
Update:
Instead of wiring up a bunch of .click() events that repeat the same code, might be best to create a function
function setThisOpacity(id) {
$("#" + id).css({ opacity: 0.5 });
//do other stuff if you need to
}
And then in your html markup, just add an onclick="setThisOpacity(someID);" where someID is an actual ID to the item you want to set the opacity.