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.
Related
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!!!
All,
I have a bit of a unique issue. I added some JS to my site that adds some opacity to my menu when scrolling past a certain amount of pixels. I then had to play around with the height of some of the header divs and now when you scroll down (slowly past the logo) and get to the header it stays at the top with opacity which is what I want, but you will see the divs "flutter" as you keep scrolling...any ideas? Is there a better way of doing this in CSS?
I cant figure out how to diagnose it .
Thanks.
http://lebellandscaping.weebly.com/
Interesting problem, I think I may have isolated it, when I open up the console, and can see the elements and css you can see that the fluttering is occurring on they body. As you scroll you can see the css change from margin-top: 0 to margin top: 49 very rapidly, exactly in time with the flutter:
Here are two screen shots I took, note the right sids, css stuff:
vs:
You need to keep that padding-top consistent through the scroll...
good question.
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}
So I've been lately working on a project of mine that I'd really like to finish, not only Photoshop wise but also HTML/CSS wise and I've encountered a problem.
This is the website & some help graphics - I would like to make the content inside the white rectangle scrollable, but everything outside the rectangle should stay exactly as it is. I'm going to either use Skrollr or Parallax Scrolling, but I first need to figure out how to make it so the entire website has a fixed height and never stretches, while the subcontent div can be scrolled down and up.
Overflow: auto; does this for you, in a heartbeat.
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!