I added nanoscrollbar to my code, it has effect but the scroll not seen. I think scroll's div has class pane but its not even seen in DOM while inspecting. What is missing?
And I added below link nano.css, jquery, nano.js.
<script>$(document).ready(function(){$(".nano").nanoScroller();});</script>
<body>
<div id="about" class="nano">
<div class="nano-content">
This is the content box and it should be scrolling but it is not!! =/.
This is the content box and it should be scrolling but it is not!! =/. This is the content box and it should be scrolling but it is not!! =/. This is the content box and it should be scrolling but it is not!! =/. This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
Related
Okay, so I have this weird issue on my website which I might have a hard time explaining. I am working on a website which only has one page(index.html) and no scroll. I have a navbar on the left with some menu items. So when clicked on a menu item a box appears with content. As it is a single page no scroll website, I have used IDs to call those boxes. Please see the code below:
<div class="nav-content">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
when clicked on a menu item this kind of section appears on the screen.
<section class="content show background-overlay" id="about">
<div class="aboutUs">
<h1>About Us</h1>
<div class="overflow-scroll">
Lorem ipsumasfasfasfasfafafsafs
</div>
</div>
</section>
And the browser address bar shows something like this after clicking on the links:
file:///C:/Users/zak/Desktop/web/project1/index.html#home
or
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
Now I have used a modal box inside the gallery content section and after I close the modal box, the page does not stay at the gallery content section but reloads.
For example:
Modal box is here:
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
After modal is closed:
file:///C:/Users/zak/Desktop/web/project1/index.html (which is the home content section)
I want the gallery section to stay open even if I close the modal.
For the modal, I have not used any JS or jQuery. It is pure HTML and CSS. To get rid of the issue I have tried a simple jquery code:
$('#modal_close').click(function(e) {
e.preventDefault();
return false;
});
This code just stops everything working.
Can anybody tell me how to stop the page from reloading after the modal box is closed?
You can try to use hide event to make refresh.
$('#modal_close').on('hide', function() {
window.location.reload();
});
I have a footer that contains a slideing div as a menu, My purpose is that when I will scroll the page the popup will scroll with the footer and it will be shown at the same position on screen at any time.
<div id="placeholder">
// the pop up will be here
</div>
<div data-role="footer id="adiv">
<div id="slidemenu">
<a></a>
</div>
</div>
From the way I understand your question, all you're really needing is the position: fixed css style:
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning
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
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/