I've literally troubleshooted everything on this!
View Here
Sometimes the slider is not loading full width and leaving a space to the left of about 150px. Only sometimes. If I hit Inspect Element it scales correctly.
Is this a JS issue or a CSS issue, is there a way to force full width on the slider.
I've checked all the JS and debugged turning things off and on, yet no solution, I've turned off the CSS Animations, no difference, I have a margin-left:0px!important; on the slider yet it doesn't make any difference.
Any help appreciated!!!
Related
So I have a website that has a hamburger menu on mobile.
The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.
I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.
I have Gifs of the problem. I will also provide a URL if needed.
Heres the first gif
https://gfycat.com/GiftedPlaintiveEgret
So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.
Here is the second gif
https://gfycat.com/EasyIllustriousBlackbear
In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.
And finally the third gif
https://gfycat.com/ContentRepentantBeetle
This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.
I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.
Has anyone else ever had an issue like this?
EDIT
Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this
https://gfycat.com/BouncyFlakyGlobefish
When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.
The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.
A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)
If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)
Various re-flow options available here
It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.
If not, make the media queries and don't use the margin-left:auto for the smaller screen size?
I have a simple layout in which I have integrated a SlidesJS slider example. Now, the thing is, whenever it slides to an image, the animation flickers and it is buggy. It would translate the position perfectly, but right after being done, it goes back a little bit and comes back again, like trying to run but being pulled back at the right position.
I've uploaded a test case for you: http://test-ground.besaba.com/silmond/index.html
The inital examples, however, work perfectly. The only changed thing in my layout are the slider's sizes. I set the container's width to 56% and its height to 400px.
Do you have any idea why this happens?
Ah, nevermind. What caused the flickering was the intercalation of both css and javascript animations/transitions.
I had the terrible idea to set something like * { #include transition(all, 0.2s) } in my code. I was thinking that this would be simpler as I wouldn't have had to add this line everytime I wanted a smooth transition. But it turns out not to be.
I believe I have tried about everything and am failing miserably. I have been working with the lush responsive slider and have been having some major issues.
To start off I took the exact code from the demo and placed it in my header, but it had a strange padding on the bottom and right side so I removed it and thought it was working fine except for the height. It's so large that it takes over more than half the page.
When I resized the window and reloaded the page though the background of the slider sat in the top left corner much smaller than it needed to be. So the responsiveness only works if you reload at 100% screen? That doesn't make any scenes.
Also, the height is bothering me. I cannot get it to resize at all and when I did put static heights on the ul and li of 10em it did resize, but then the responsiveness went out the window.
I tried to post this in a js fiddle, but the plugin was so much code that it crashed it without running anything. If it would help I can post a dev site with this on it. As I said I used the exact html and css from the demo files I only took away a bit of padding to make it full width.
Any help would be much appreciated.
Ok, I have managed to work out a solution for the width issue. The problem seems to relate to the initial baseWidth, which defaults to 1140 pixels. Playing around with the
data-base-width="600" and data-base-height="600"
attributes in the first lush slider div tag may see you make some progress, but it looks like only fixed values are accepted, no percentages. I opted for this solution which seems to work, write the first div tag using document.write method and programmaticaly set the width the the clientWidth, as such :
<script>
document.write('<div id="lushDiv" class="lush-slider autoload shadow-a" data-slider-pause-on-hover="true" data-base-width="' + document.body.clientWidth + '" data-base-height="600" style="background: rgb(229, 229, 229)">');
</script>
My suggestion is not to use Javascript or JQuery. Some simple CSS and HTML will do.
Here is the fiddle: http://jsfiddle.net/jacobdubail/bKaxg/7/
You obviously don't need all of the CSS. Just change it to accompany your layout.
Change your width to percentages, like so:
min-width: 100%;
I would suggest changing the height to ems.
I am trying to make a slider that is exactly a certain height, and needs 100% width. I have the width sorted, but when I have my height the slider adds something like 20px to the image. I know its not that big of a deal but it seems important for the project. All of the images I have are the exact height I want them to appear, so is there a way ether by changing something in the javascript or the addressing some id/class I haven't tried yet to change the height(and just the height)?
Thanks for your help.
Sorry but I am not allowed to release my code yet.
I didn't really fix it but I found a workaround. I took off the bottom 20 or so px from my images and found that re sizes appropriately this takes away some info but hopefully it will be ok, here's to hoping the boss will like it!
I've read quite some posts about webkit browsers having issues with images. I couldn't find a post and thus an answer for the one I'm about to explain.
I created a home-made slideshow using jQuery that basically places all the images next to each other on a row and I then play with a mask element (overflow: hidden) and the margin-left property to select which one is to be displayed. I didn't reinvent the wheel...
On FF, Opera and even IE, it works like a charm! But I have no luck on Chrome (I didn't test Safari) : the first image shows ok but when the sliding effect kicks in, 20px-ish of the first slide remains at the top of the slideshow and overlay the second slide. If I carry on sliding, the first slide part remains as an overlay on the following slides. The images don't refresh ok on Chrome which makes the whole slideshow look rubbish.
I tried to play with the images css properties after the sliding effect to kind of force the container to refresh its content but again, no luck.
Does anybody have an idea on how to work that out?
Thank you
Found the fix...
As I said, trying to force the container to refresh its content using some different css properties didn't work.
What worked though was to add a span to the container, that's it... At the time of the issue, my container only had images in it and a map. I added a span (out of luck) and it worked straight away!
I can only assume why adding a span makes the whole container behave ok. I guess it is kind of the same than the "hasLayout" property IE6 used to throw at geeks. It couldn't render the element properly until it had an element that had a consistency (height, width ... set with a value).
Anyway, I hope this will help and yes, I did dare to compare Chrome to IE6... ;-)
Good day