I'm having a hard time figuring this out.
Trying to implement a Sidebar from Semantic UI http://semantic-ui.com/modules/sidebar.html#/definition, that comes from the bottom, but it doesn't fully hides, leaving a "strip" button that allows you to reopen it.
This is the best as I got : https://jsfiddle.net/wcec9gc6/1/
html :
<div class="ui bottom sidebar">Sidebar Content</div>
<div class="pusher">Page content</div>
<div class="ui bottom fixed menu button">
Click to open sidebar</div>
But as you can see it does not pushes the fixed button up, but I also don't want it to push the rest of the page, only the button
Related
I'm trying to fix a div but only when I'm scrolling down.
I have this template :
<div>
<div class="header">Title</div> // A header that will not be fixed
<div class="sticky">Navbar</div> // A div that will be fixed when scrolling down
<div class="content">...</div> // The rest of the page
</div>
So the idea is that, when opening the page I have the 3 div displayed in the same order as the code (so header then sticky then content).
And when I scroll down, the sticky is fixed while I navigate the content.
I've tried to put a listener on scroll but I don't see how I can put a {position: fixed} only when scrolled and nothing when I return to initial position.
Without writing a novel of a backstory, using Swiper, I'm trying to call .toggleClass on an HTML element, whenever one of my swiper slides has the class of swiper-slide-active. This is so that I can have text appear on single slides, instead of all slides at the same time.
Here is a visual of what I'm describing: studioyonis.com — if you click the caption at the bottom so that the project information comes up, then drag RTL, you'll notice that the project information for the second project was also visible for a short time. It disappears (correctly) because of some other code I have, but l would like it to not appear at all (until I click the caption on that slide).
I've been trying this if statement to single out the active slide and help set up a subsequent click function, but its not working and I can't figure it out for the life of me. Can JQuery, for some reason, not see the swiper-slide-active when it happens?
if ($('.swiper-slide').hasClass('swiper-slide-active')) {
$('.overlay-caption', this).toggleClass('overlay-caption-active');
$('.overlay-caption-box', this).toggleClass('overlay-caption-box-active');
};
Here is a sample of my HTML structure. There are ~7 different slides like this, all with overlay-caption and overlay-caption-box classes.
<div class=“swiper-slide”>
<div class=“caption-box information-00”>
<a class=“caption links”>
Text Text Text Text Text Text
</a>
<div class=“overlay-caption-box”>
</div>
</div>
<div class=“overlay-caption”>
<div class=“project-information”>
Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</div>
</div>
Hopefully this makes sense! Been a long 10-12 hours of work on this site today, only to realize this problem near the end of the night.
Cheers!
Instead of changing the display, I just locked swiping to different slides while the project information is visible. That way the user doesn't know all of the captions are open because s/he can't scroll to them. This forces the user to slow down and look at each project, instead of quickly swiping through. Since its a portfolio site, maybe thats a good thing in this case.
I want a layout the was showed in the following demo
http://jsfiddle.net/EX6qV/2/
<div class='container'>
<div class='one'> One </div>
<div class='two'>Two</div>
</div>
Here the div one has position:fixed. I want to scroll the fixed div (One) if scrolling happens.
Due to the fixed position the div sticks at that position hence it overlaps with div two if scroll happens on zooming a page.
Is the any jquery methods to overcome this problem.
I'm trying to implement modal window on my page. Idea is to display a popup window with project screen shot and code sample. For now I've implemented popup window with screen shot. Seems to work fine except having 2 issues.
1) mask is not covering the entire window.
2) once popup window is closed, without refreshing if I click the screen shot again, mask is not displayed.
webpage
<div class="screenshot">
<div class="case">
<div class="thumb"> <a id="hooversMobile" href="#dialog" name="modal" title="Hoover's Mobile Site"><img src="images/proj_over_2.png" alt="Project thumbnail" style="top: 0px; "></a>
</div><!-- end thumb-->
</div><!-- end case-->
</div>
.js
The following DIV has position relative set. This means any position: absolute elements below it will be relative to its position.
<div class="project" id="mobile"></div>
This is what is causing the overlay to only extend from that position.
The second click problem is due to #mask being faded out but not running fadeIn again like you do on the content div.
Also, to get a better response you should pick out part of the code and copy into JSfiddle. Then you can ask very specific questions about the overlay positioning.
I am trying to implement jQuery UI tabs in my web app.
I am using ajax functionality so that the tabs are in the main "layout" of the page and each tab contains a different web page.
I want to wrap the content of the tab in aborder, but that the navigation panel of the tab won't be in the border.
I tried putting a border on the main div of the content, but I see only the top border and the rest don't appear.
Any ideas?
http://jsfiddle.net/GW5M2/
vs
http://jsfiddle.net/GW5M2/1/
As Gregg's demo showed, you need a clearing element at the end of the list of floating elements. Make sure the clearing element is not (accidentally) floating (i.e. use float: none). So, you would do something like:
<div>
<div style="float:right">foo</div>
<div style="float:right">bar</div>
<div style="clear:both; float:none"></div>
</div>