I've been working on a website, below link,
www.production39.com
I have created some panels that will slide out when the right hand buttons are clicked (i.e. who we are, what we do, get in touch), then by clicking the back button, it will slide out of screen. I have set up a fade effect on the back button image onmouseover, and previewed it on the web so far so good. However, I've noticed an issue with the fading effect when I view it in Chrome, when I hover over the back button on the "who we are" and "what we do" panels, the content of the panel also disappear!
This doesn't happen with the "get in touch" panel though...
I have checked my code and I can't seem to find where the problem is... It would be lovely if someone can point me to the right direction?
Thanks so much!!
Related
I've built that page. and it's using the framework vue.js 2 and Jquery.
It's blowing out my head because that page is very slow.
Could you expert guys help me with some idea about how to speed up it.
Thank Guys.
The page is that:
http://softwareapqp.com.br/teste/public/pecas/21/cronograma
you can click in "editar" button and in blue button which opens you can try to drap and drop it. You'll see how it's realy slow.
or, you can click in "Desenvolvimento Fornecedores" or "adicionar atividade" and see how the modal is slow to open.
Had a quick look, your right it's not a seamless experience. It doesn't look like a problem with JavaScript, this is more of a UI/UX problem. One thing stood out, you have a horizontal scroll inside a vertical scroll inside the vertical scroll of the page itself.
Maybe you can have panels with left right panning navigation arrows that asynchronouously loads content when the user clicks the arrows instead of scrollable windows. This way, you're only loading what the user can see and scrolling the page wouldn't be such a pain. Only load the data/HTML when it's useful, otherwise it's just bloating up your memory/DOM.
I'm polishing up one of my websites, and I would like to add in an effect to all the images on my page so they all fade in when the user scrolls down to each respective image.
I've seen several posts concerning this effect, but they all deal with only fading in one particular image.
Is there a way to have ALL the images on a page fade in when the user scrolls down to each one?
I've got quite a few images on this page, but I didn't want to have to go into each one and copy/paste the code to add the effect to each image individually if I can get away with it.
Bonus points for anyone who could also help me figure out how to reverse the effect when the user scrolls up.
This way, if the user scrolls back to the top (or another section of the page) all the images that have already faded in all fade back out once they are completely out of view.
This way, if the user decides to scroll back down, they get the same image fade in effect each time they scroll through the page.
Any help on this issue would be greatly appreciated. Thank you!
You could check on the scroll event if the offset of a image is reached, and them show the image, on the contrary you can make it work for hidding ;)
You're looking for something like Wow.js. It is very easy to implement.
http://mynameismatthieu.com/WOW/
I want a panel with a start button in the middle of the page. When the button is clicked the panel should move up and disappear. The content of the page should start loading after the button is pressed. Something like a start button for a game.
Currently I use two html pages. The first is the panel(index.html) and the second is the content. When I press the button it moves the panel up, removes it and loads the second page. It feel a bit clunky so I wonder is there a better way to do this?
I'm not sure if this works for canvas. As I said in the comments I suggest doing a text-align:center;. This works for text and buttons. To center other elements such as divs try margin: auto;. Good luck with canvas :-)
I would also suggest expanding your css knowledge because text-align is very common to use as well as margin:auto;.
I am using wordpress' revolution slider that spans the home page. I want to put a scroll down button, so users are aware they can scroll. I want something like this one: https://exposure.so/
I tried putting a div on top of everything and a link that links to anchor link further down the page. It works, but I don't know how to make the div disappear when the user goes down, and reappear if they go back up. Anyone know how to fix this?
You need to calculate the scrollbar's handle position using javascript or jQuery.
If its towards the bottom of the page, hide the button, else show it.
To find scrollbar position : LINK
I am developing my first HTML5 page for mobile and desktop and I need to implement slide menu button! When you first click this menu button it will open menu which covers 50% of my screen and menu contain something similar to "log in bar"(some inputs and some text; like top right corener of FB), and after you click button menu, it will be hidden!
I have implemented some solutions but I'am not satisfied with them!
One variant of my menu is to do everything right but it is visible to user all the time! Animation works fine but when I want menu to be hidden, it becomes visible right of screen.
Other possible solutions : picture and buttons go under the menu! When it opens, it "push" pictures and buttons below.
P.S i tried to add image but it seems that I don't have more than 10 reputation! Also, I didn't watch tutorials for jQuery so if any solution is theer in jQuery, please suggets me..