CSS: Transition of horizontal scroll menu is not smooth - javascript

I would like to make the transition of the menu to be smooth. The problem is when you click the arrows, the 2nd div will show on the bottom of the 1st div, making it not smooth to look at. pls see below for my code:
Pls see my code here:
http://www.codeply.com/go/mdMPOkmFVH

in your code you need to do some basic change in CSS, your CSS should be as follows
.btn-arrow {
display: inline-block;
text-align: center;
}
.effects-list {
text-align: center;
}
.col-xs-4 {
min-height:20px;
}
Here you need to set minimum height 20px for class .col-xs-4, The reason behind this is the jquery function needs to set sliding element to have position absolute, and you were setting it to relative by force. and if all child elements in divs are absolute elements, then absolute elements won't acquire it's space in parent div and that is why it will make parent div's acquired content will be empty. so it will treat it as empty div and set it's height as 0px, and won't show anything in the div... so here we are specifying it's minimum height to solve our issue.
Another thing that we could have done is adding white space to the parent div
e.g.
<div class="col-xs-4" id="effects_menu"> </div>

Related

Trying to fix height of element so it highlights correctly when hovered

Hey so I have a bunch of tabs made up of like this:
<li><h6>Tab1</h6></li>
<li><h6>Tab2</h6></li>
<li><h6>Tab3</h6></li>
<li><h6>Tab4</h6></li>
<li><h6>Tab5</h6></li>
<li><h6>Tab6</h6></li>
There are all horizontally aligned with display: table-cell;
The problem is that some of them have text that wraps onto a second line, and the hover state when I mouse over an item isn't going to the full height of the row.
You can see the table I'm refering to on this site here: http://perennial.chkpt.com.au/invest-with-us/
You can add :hover style on li instead of a.
Example: apply this style for the website you provided
li.ui-state-default.ui-corner-top:hover {
background: red;
}

maintain the height of the content floating right same as the sibling div floating left, responsive

I have the below structure:
<div class="wrapper1">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
<div class="items">
<ul><li></li></ul>
</div>
The above layout is used for a responsive site. so on resizing the window or on page load on different devices the content in the right div should always remain of the same height as that of the left div.
Also, I have to append a link "more >>" responsively where the last character of the content in the right div ends.
I have used overflow hidden property for the right div and I am trying to give some height to the right div based on the window width using media queries. Have tried different things but since the text amount changes responsively it is becoming difficult to append more link to the last character.
Also, i tried using jquery/jscript to detect the height of the left div on page load so as to set the height of the right div same as that using .outerheight() property but on initial load of the page I am not able to get the height in pixels since the width of the image inside the left div is set to 100%.
Also, there are 2 main issues here,
1)I set the height of the left div same as that of the right div responsively. Here the extra content to be displayes in the right div should always be hidden.
2) append more link just where last last charcter of the last visible line of the content on the left div is responsively.
Could anyone please suggest some solution.
With flexbox the columns share the same height automatically, without any javascript.
.wrapper {
display: flex;
}
.left {
background: yellow;
flex: 1;
}
.right {
background: red;
flex: 1;
}
<div class="wrapper">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
I believe all your problem will be solved if and only if you use bootstrap css rules the grid system and furthermore make a class with specific height and assign it to the div . And more advice get familiar with media query in css3
Create a div with relative position for appending links and make it in the bottom of the container div

Sticky Navbar offset to prevent overlap of content

Currently on my single page site when you click on the Bootstrap navbar menu items it takes you to the section of the page with that div #ID. However, naturally because the top of the navbar lines up with the top of the new section my content is overlapped by the width of the navbar (80px or 50px when collapsed).
Screenshot of issue:
"Ready to book" heading is actually centered in the middle of that div but overlapped by 80px of navbar.
Screenshot showing top of page:
The issue is that I do not wish for the navbar to overlap the content in the section I have linked to. Put in other words, I would like the top of bottom of the navbar to line up with the top of the new section div.
Surely this can be handled using some JS to offset the navbar up by the height of the the navbar?
I have had a suggestion to use CSS to add padding into the top of section but this adds an extra 80px of padding that I don't want, when normally scrolling the page.
Okay so I found two solution to this finally using JS and CSS
here.
My preference is for this CSS solution:
#id:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
Obviously, replace ID with the ID of the anchor.
The actual JS snippet solution:
var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }
However, it is still a bit clunky as you can actually see the the browser scroll to the anchor point and then back up by the scrollBy offset amount of 80px.
I am not sure if this problem has been solved yet, but I had the same problem and adding the appropriate heading worked (by appropriate padding I mean the height of your navbar element).
For example:
#id { padding:50px }

How to stop a parent div expanding vertically when child div becomes visible

I have a parent div that has a height set on it.
There are child divs inside of it with initial visibility turned off.
When I make it visible, the parent div expands vertically. I dont want that.
Background:
I'm using DataTables, with the scroller and filterColumn plugins.
The header of my table has an action on it assigned by jQuery that when I click on the a column header, a div is to appear below it and show some content.
Issue is, when it appears, the header div expands.
I've tried overflow: hidden, auto, etc, but the closest i can get is the scrolling body seems to cover the floating div. I also set the z-index to above the scroller, but that doesnt do anything either.
Any suggestions?
You can give the parent div a fixed height
.parent {
height: 400px;
}
and make your child div have absolute position
.child {
position: absolute;
}
use position:absolute on the element being shown to remove it from the page's flow. this will prevent it from affecting the width of the parent div.

jQuery bind position:absolute to an element

i have a situation of:
<div class="hey1"><img class="img1"></img></div>
<div class="hey2"><img class="img2"></img></div>
<div class="hey3"><img class="img3"></img></div>
so .img imgaes are in position:absolute; binded to right top corner of related .hey div
when i fadeOut(); for example .hey1 div, the other .hey2,.hey3 divs scrolls more on top (right) but images binded remains on same absolute position, what i would like is to bind .img images also when fading out related div
any way to do that?
Make sure your container divs have position.
Example: http://jsfiddle.net/redler/D6Ucg/
In the example, click a yellow box to make it fade out. Then see what happens if you re-run the test after removing the div { position: relative; } style.
Instead of positioning img elements absolutely with in div elements, position them relatively. This way they will move along with the div when div is re-positioned through scroll or programmatically.

Categories