I have a markup arranged as follows in my website:
<body>
<div id="wrapper">
<div id="middle">
<div class="red-container">
<div class="row">
Middle. Row 1.
</div>
</div>
</div>
<div id="right">
<div class="green-container">
<div class="row">
Right. Row 1.
</div>
</div>
</div>
</div>
</body>
The right div as would be obvious has to be towards the right of the middle div.
Here's the fiddle (right div here inside my fiddle somehow is not actually to the right of middle div) : http://jsfiddle.net/NNMYS/
I am trying to achieve a sliding effect here:
All the content from the middle div should slide to the left and get removed after the animation. On the other hand, simultaneously, the content from the right div (which in my case will be added by ajax to the right div) should slide from the right div to the middle div (and removed from the right div). How can that be done?
I could have done a content slider directly by having all the content directly placed separated by positions and sliding to the clicked item. But here since I would be adding content by ajax and also have some responsive implementation, in my case that doesn't seem to possible.
Look at this. I think this might help
http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/
Related
I have this calendar I'm making, I positioned the elements with absolute position within the rows, like this:
every element is positioned with absolute position so it is not part of the flow, so the problem is, if I have an element that the text within is too long, the element will slip down and cover/will be covered by another element, like this:
Now idealy i want the element that is covering the long elment to go down. But because the long element is positioned with absolute position and not relative he can't push the element down (I don't want to use scroll here on the long element, I want to see the whole text).
And I also can't use position relative because then I will not be able to position the elements right on the X axis, because they will push other elements to the left by their width. and i don't want that because the position is calculated by the days the event accured on.
Basically I need absolute position on the X Axis, and relative on the Y Axis.
Any ideas on how to solve this issue will be appretiated. (maybe a library the can do the thing above ^)
edit: also can't use grid since i want to support old browsers.
Actually i would use bootstrap grid system, it lets you position column evenly inside rows.
In addition, I would say that if an element need more space, the whole row should expand.
Take a look:
.col{
border: solid 1px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Wow that is a really long text that is slipping
</div>
<div class="col">
text
</div>
<div class="col">
text
</div>
</div>
<div class="row">
<div class="col">
text
</div>
<div class="col">
text
</div>
<div class="col">
Wow that is a really long text that is slipping even more than the last one
</div>
</div>
<div class="row">
<div class="col">
text
</div>
<div class="col">
text
</div>
<div class="col">
text
</div>
</div>
I added the border property so you can see more clearly.
You can read through the docs about how it works
good luck.
I have the following html:
<div class="col-sm-12" id='dropdown_menu_group'>
<div id='dropdown_library_menu'>
<div class="row" id='dropdown_menu_row'>
<div class="col-sm-2">
<a class='button-text btn' id='library_button' href="{{pathFor 'library'}}">my library</a>
</div>
<div class='col-sm-2 col-sm-pull-1' id='google_drive_text'>
GOOGLE DRIVE
</div>
<div class="col-sm-2" id='settings_button'></div>
</div>
</div>
<div id='dropdown_library_menu_border'></div>
</div>
my id='dropdown_library_menu' is hidden by default, and the div below it <div id='dropdown_library_menu_border'></div> has opacity of 0, so that when it is scrolled over, it makes the id='dropdown_library_menu' slide down. The issue is, though, that <div id='dropdown_library_menu_border'></div> is still there when the menu slides down, and thus, when I scroll over the opacity 0 div that triggers the slideDown (inside of the menu, at this point), it tricks my jQuery into thinking this condition is met:
'mouseout #dropdown_library_menu': function(ev){
ev.preventDefault();
$('#dropdown_library_menu').slideUp('slow');
}
Because technically, I am mousing out of the dropdown menu and into the dropdown menu trigger.
I want to make the blank div move to the bottom of the menu when the slideDown is triggered, but setting position relative on the parent and position absolute on the children totally messes up my webpage.
You can make it even slower,
'mouseout #dropdown_library_menu': function(ev){
ev.preventDefault();
$('#dropdown_library_menu').slideUp(3000); // Slide up in 3 seconds,
}
I have the following set of divs:
<div class="col-md-12">
<div class="col-md-5" id="left">
<div id="A"></div>
<br />
<div id="B"></div>
</div>
<div class="col-md-5" id="right">
<div id="C"></div>
</div>
</div>
So we have a left and right column, with the left column containing two divs and the right column containing one. JSFiddle doesn't seem to have Bootstrap as an option so I had to make do.
What I want to achieve, when in mobile view, is this:
You can see the div that was at the top left, div A, is now at the bottom. I know I need to use offsets for this, but my tinkering has produced no results.
I have two containers, as displayed in this FIDDLE.
Both have content that can become quite lengthy, thus I need to use overflow: auto on both containers.
The HTML structure:
<div id="maincontainer">
<div id="left-container" class="go-left overflow-y-auto">
<div id="left-inner-container">Contents</div>
</div>
<div id="right-container" class="go-right overflow-y-auto">
<div id="right-inner-container">
<div id="button-wrapper">
<button type="button" id="tip_button" class="btn primary customized-button">tip</button>
</div>
</div>
</div>
</div>
I have a button within the #right-container that creates a tooltip on click, displayed right next to it. The problem is that, when I have lengthy content (that determines scroll bar to appear), the tooltip won't be placed near the button (on scroll). It will remain relative to the #maincontainer. If I make it relative to the #right-container the tooltip will be 'chopped' (due to overflow).
What I'm seeking is to have the tooltip aligned next to the button when the user scrolls down that area.
If you are using Bootstrap tooltip then add class 'bootstrap-demo' to parent div of button & make sure you are NOT passing container:'body' parameter when initializing tooltip.
I have the following
<body>
<div class="sidebar"></div>
<div class="main">
<div class="page-1">
<p>Page 1</p>
<button id="btn-page2">Go to Page 2</button>
</div>
<!-- Other Pages -->
<div class="page-2">
<p>Page 2</p>
</div>
</div>
</body>
I am trying to follow the same principle of JQuery mobile by having all the pages in a single HTML document.
On page load, only the div with class page-1 should be displayed. However on clicking the button with id btn-page2, the second page should be displayed instead of the first one.
I figured I could add an .active-page class on the visible page with a display:block as attribute.
However, I also want to slide the second page from the bottom smoothly.
Any suggestions?
You can have a look at this blog.
http://mindfiremobile.wordpress.com/2013/07/16/smooth-page-transition-on-mobile-devices-within-single-html-page/
This demonstrates the way to add slide page effect using css3.
You can use the same concept to have the page slide form bottom to top.
you can create a css3 class which will slide any page from bottom and add it to the page div based on the button clicked