I made a site parallax scrolling, using slider and stellarjs.
This works well for scrolling up and down, but it also scrolls horizontally and I do not want.
So i want to disable horizontally scrolling and keep my width at 100% of user screen or at a specific width.
here's the website : ecolopeintre.com/index_para.php
Stellar offers options, please review docs http://markdalgleish.com/projects/stellar.js/docs/
In order to turn off horizontal scrolling please review the code below hopefully it can help.
$.stellar({
horizontalScrolling: false,
});
Related
I have a question about Plank dock application.
As you know Plank supports theming via dock.theme and hover.theme files in .local/share/plank/themes folder. I am using all of its padding options like TopPadding, BottomPadding etc and they are working perfectly.
But how do I provide margin to Bottom? I don't want it to be stick to the Bottom and I want to move it to a little bit up so there will be space between bottom of the monitor and bottom of the Plank. Otherwise I can't provide full Round corners it looks just ugly.
Does anyone know how to move Plank on screen?
I don't know how to properly explain this.
I have a svg element which is a big rectangle. If i scroll down, then click on my element, the click isn't registered where my mouse is, but where my mouse would be if i didn't scroll down.
So, if i scroll down by 100px and click on my rectangle, the click will be registered 100px above where i actually clicked.
It's behaving as if i hadn't scrolled down.
Edit: I'm using event.clientX and event.clientY to get the mouse position.
I'm new to svg and i don't know the right keywords to describe my problem.
I'm using svg.js, though i don't think it's relevant to the problem.
I assume this is a well known thing. Can someone point me in the right direction? What kind of keyword am i looking for here?
The problem seems simple enough, i just need to know what to search for.
Thank you.
The problem was the utilization of (event.clientX, event.clientY) to get the mouse position.
In the presence of a vertical and/or horizontal scroll, using these properties caused a mismatch between where the mouse appeared within the page and the mouse position provided by (event.clientX, event.clientY).
I was using the mousedown event, with the mousemove event to create a selection rectangle, similar to what you can find in video games. When horizontal or vertical scrolling had been applied, my selection rectangle didn't appear where my mouse was.
This was solved by using event.pageX and event.pageY (instead of clientX and clientY).
Thank you to #ccprog for pointing me in the right direction.
I trying to create a view which have a scroll view. If I Touch to bottom or if I drag my finger to bottom ,then the Scrollview should scroll automatically in fixed speed. consider the below Image
I am using PanResponder class in react native to achieve this functionalities.
for scrolling I am using scrollTo() . But I am failed do this. I like to share my code but it was too bulky and not understandable.
So my question is Is anyone have any code to achieve this. or Is there any libraries available?
Please help me
Use scrollToEnd({animated: true}) to go the bottom of scrollView in react-native.
From doc.s of facebook https://facebook.github.io/react-native/docs/scrollview#scrolltoend
scrollToEnd()
If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.
Use scrollToEnd({animated: true}) for smooth animated scrolling, scrollToEnd({animated: false}) for immediate scrolling. If no options are passed, animated defaults to true.
I have a 1900px-wide web page at https://zackel.com/50/a0.html that I'd like to display as intelligently as I can on smaller screens, say 1024 x 768. If you show the page now on a 1024-wide screen the left side is cut off and there's no scroll bar to go over and see it.
I've been using
http://www.infobyip.com/testwebsiteresolution.php?url=https%3A%2F%2Fzackel.com%2F50%2Fa0.html&width=1024&height=768&in_browser=true
to view the page on various screens.
How can I get browsers to scroll over to the left to see the Box 1 and Box 2 content there?
Or what do I have to do to the HTML/CSS to get it to adjust on load to a smaller screen?
Thanks
You need a responsive/fluid width design , also if by chance you are using firefox , you can change the resolution of your browser window by pressing CTRL+SHIFT+M
Couple of responsive HTML5 frameworks that might be of help to you --
http://foundation.zurb.com/
http://getbootstrap.com/
my website, has some issues acting different for different browsers.
the red panel appearing under the grey buttons on bottom,seems only ff,not other browsers.
when user clicks one of grey buttons on the bottom,red panel should start under the white panel.but it starts a little bit of its left side.
the white panel on the left side on islerimiz.html(which user clicks middle button on bottom) page should be blurred.i added script for this but it is not doing blurring thing.the same script is on the iletisim.html(which user clicks rightest button on bottom) page and it is working truly.
ie6 errors:
the red point seems as a rectangle.
red panel script is not working.
the background of page and the logo's background should be the same but they seems different
the blurred panel on islerimiz.html page is not appearing at all.the bottom buttons seems true but the active button's color should be black but it seems grey too.besides little pictures should appear when mouse hover on the grey buttons,appears on open position.
the blurred panel on iletisim.html is not appearing.the pictures on the blured panel appears with shadows and shape is rectangle.also the links on that pictures is not clickable.
how can i solve this problems with css.if i couldn't solve with css,i can try jquery but my first choice is css.i have more than one javascript library on index page.but if i remove one of them,some scripts is not working.
almost all of those issues are because you are using pngs. switch them to gifs. apply them in a style sheet wrapped in conditional comments, at least for ie6, and a percentage of that list will go away. your selectivizrCSSForIEselectivizr.js is also targeting greater than ie6. i'm not sure what the red panel script exactly is, but i see you are adding webm file for ie...idk 100%, but i'll say it doesn't support that format either. convert it to media type that ie6 likes, and again, only serve this up in the ie6 conditional comments