I am working on a project now, and it has a weird bug which I don't understand. Here is what is happening: if I keep clicking on different products on a page to expand and close, after I keep clicking on 4 or 5, the page seems like it scrolls up or down sometimes with a jerk. This effect can also be viewed in this video: https://www.dropbox.com/s/u13hec76kwk1r9e/ghosts%20in%20product%20page.mp4?dl=0 (see at 0:16)
Here is this page: http://protec.bluebeetle.me/html/app/products.php?cat=microphones
And here are the login details:
User : you
Password : awesome
Thank you so much for your help guys.
The issue was the sliding logos after the main hero slider. I am using jQuery.carouFredSel-plugin for them. Because they had different sized images the height of the parent logo slider container was varying weirdly up and down. Fixing the height of the div inside the logos container fixed the issue.
Related
I'm just using a small bootstrap carousel on a site, but it's acting a little oddly. The first image displays at the correct size but each subsequent one appears half-sized, centred at the top of the container for around half a second before resizing properly. Having reached a frustration point I'm hoping someone can point me in the right direction as to why it might be behaving like this.
Easy way you can handle
This just apply one commen class for images
Then apply CSS
Specify height and width
Definitely your problem get solved..
My navbar overlaps/wraps to a second line when the screen resizes/reduces. This looks messy. I have used a toggle button for media devices, but this doesn't address the issue of when people resize the window.
There are two websites I can give an example of what I am hoping to achieve with my navbar/page:
https://www.facebook.com/
http://www.dailymail.co.uk/home/index.html
Note with both of these websites, that when the screen is resized, the page remains the same; although the window is reduced, nothing on the page is reduced. The navbar remains the same.
This is what I would like to achieve, but I'm not sure how?
And is it possible to achieve this with just the menu/navbar? Rather than making the whole website fixed in position?
All replies will be much appreciated!
Thanks!
John.
Try to style your navbar elements with display:table-cell and parent should be display:table.
Or you can go with flex.
I've seen similar questions to do this but so far I can't find any that address the obvious. On my website the top portion is a different color than the body which I created using a div and setting a color to that div. Two simple questions.
How do I get that div to fill the entire portion of the header of the screen regardless if I zoom in or out?
And how do I keep my title and menu bar from falling out when I zoom-in the browser?
I have gotten close so many times but there is always a compromise. Either the div fills the entire header but when I zoom in the text falls out and causes the div to wrap around the page or the menu wraps and it's just gotten frustrating. I hope what I wrote made sense but if not here is a clear example of what I want to accomplish. http://carlodiego.businesscatalyst.com/index.html#home
Notice on this page that if you zoom in or out the top portion remains filled with the same color.
How do I get that div to fill the entire portion of the header of the
screen regardless if I zoom in or out?
simply make the add css with width:100% && margin:auto
I am trying to recreate the home page of this site... http://spooz-creation.com/
I want to slide a large div (green) that contains other divs (yellow) left and right in the users window (blue). Upon loading, the content div (green) will be centered in the users window like the example site. There will also be a static header (pink) with nav elements.
I really want the scroll to be hover activated like the example site. Also I would like the content giv (green) height to be flexible based off users window height.
Adding the parallax effect on top of all that would be epic but not totally needed if to complicated.
!!!!! (WIREFRAME EXAMPLE) !!!!!!
http://lpaoriginal.files.wordpress.com/2012/07/desktop.jpg
Please help! I've been trying for days to figure this out!
This JQuery plug-in might just do exactly what you're looking for.
JParallax
Been using it for a project I'm currently working on. Great thing about it is you can limit the plug-in to x-axis only or y-axis only.
I have a problem I haven't found an answer to in similar questions:
I have a site that dynamically resizes a horizontal scrolling image gallery and some text as you resize the browser. That part I have working OK, I just can't seem to get proper control of each respective element.
Take a look: http://john-godwin.co.uk/testsite
If you resize the browser, the large text overlaps the gallery before the gallery starts shrinking, and if you resize the browser small enough, the gallery eventually overlaps the footer as well.
Does anyone know what changes I need to make to the code to make everything stay within a boundary and resize respective of the other elements without encroaching into each elements space?
Thanks in advance.
The CSS can be found in http://john-godwin.co.uk/testsite/css/style.css
Remove z-index:500; in the .content class