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();
});
Related
I am working on a bootstrap website. I have a button that I click on one pageA to an href tab on pageB. I want to be able to click on the button on pageA and open the tab and the connected panel on pageB.
Here is what I have researched and tried:
jQueryUi tabs to set a specific tab to active
$('#learn2').click(function(){
$('#tactical-tab').tabs('select', 4);
});
jQuery triggers to simulate an event
$('#learn2').click(function(){
$('#tactical-tab').trigger('click');
});
Adding a class via css to set tab to active
$('#learn2').click(function(){
$('#tactical-tab').addClass(".ui-tabs-active");
});
Here is some code for the button.
<h4>Learn More</h4>
Here is some code for the tabs and tab-panels
Tabs
<div id="tabs">
<ul>
Tactical Transparency
</li>
</ul>
Panel
<div id="service-five">
<h4>Tactical Transparency</h4>
<p>Sample paragraph</p>
</div>
Any help or input would be appreciated as I am not sure where the next place to research would be or if I am just missing something.
I downloaded Fancybox pluging from http://fancyapps.com/fancybox and used for open my gallery images in popup.
and also I used fixed navigation when scrolling.
My problem is, when I click on images, it will open in a popup window. It is ok.
But, fixed navigation menu is still appear on the popup window.
![problem][1]
Navigation Menu HTML
<div class="nav-container">
<div id="nav">
<ul>
<li>Home</li>
<li>shop</li>
<li>Gallery</li>
<li>Facilities</li>
<li>Terms</li>
<li>Contact</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
Navigation Menu Javascript
jQuery("document").ready(function($){
var nav = $('.nav-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
Because of that navigation, user can't close the popup window.
Guys,
please help me to solve this.
Your navigation menu is probably set as position: fixed. This makes it have a z-index which is, by default, above every position:static placed elements (which is the default).
What you should do is edit the CSS of the lightbox so it has position: relative which should make it go above your navigation (assuming it's later in the DOM).
If it's still showing up below your navigation, check what the z-index of your f-nav class is, and change the z-indexof your lightbox so it's higher than the one of the navigation.
I'm using Bootstrap's nav-tabs with the following setup:
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
Home
</form>
</div>
</div>
As you can see, I have a link in my profile tab, which links to the first tab. Clicking on the anchor does change the URL in the URL bar, however it doesn't jump to the specific tab.
I then noticed that it is generally not possible to link to a tab directly, so I added the following code from Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
Now I can link to a specific tab from somewhere else, but not, if I'm on the same page where the nav-bar is. Reloading the page would then jump to the wanted tab, so I thought I could just forcefully reload the page, with the solution from Javascript: How to truly reload a site with an anchor tag?:
window.location.reload(true);
This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the home tab, when clicked on the anchor.
Thus, how would I jump to a given id from another tab?
You might have been put on the the wrong foot by the other answers you mention ... it is fairly trivial to change tabs from within the same page (regardless if you're in another tab or not): you can use the basic bootstrap tab navigation Javascript for this.
First change your html a bit: add an id to your <ul class="nav nav-tabs" id="myTab">.. then add a link to your second tab:
<div class="tab-pane fade" id="profile">
<form id="tab2">
Jump to home tab (this works)
...
and add the following in your document ready:
$('#gotohome').click(function() {
$('#myTab a[href="#home"]').tab('show');
});
Working example at jsFiddle.
The given answer
$('#myTab a[href="#home"]').tab('show');
can also be used to make a JavaScript software jump to a specific tab.
Assume you want to jump to a specific tab on start by using the url:
http://myDomain/myApp#tabSomewhere
You can imagine that will work (you need to make some additional coding).
Suppose your First page is on the tabHome (you make that active with the 'active' class. When you try to go back to that page using javascript you have to remove the active class from the tabHome using:
$('li').removeClass('active');
So I have this menu and when I click on a button I need to create another div under the menu. I have done that. But when I click on another button on the menu that div is still there and I want it to dissapear/collapse. So how should I do it? What I found until now is how to hide a div when clicking on a specific show/hide button, but I need to hide that div when I click any button on my page...
Any help is highly appreciated.
My code is this but I don't think it is relevant (I am interested in the process, how should I do it):
<div id="container">
<ul id="nav">
<li>Despre noi</li>
<li>Projects</li>
<li>Implica-te</li>
<li>Stiri</li>
<li>Contact</li>
</ul>
</div>
So this is my menu and when I click on projects this div shows up
<div id="menu_lava">
</div>
which is a lavalamp submenu. But how can I make it to collapse when I click on other buttons on my main menu?
Hide all info-div's on a click and just show the sepcific one:
Here's a jsfiddle (using jQuery):
http://jsfiddle.net/FKeAF/1/
I have a problem with scrolling to the top of the page. I have a page with different sections. In the third and the last section of the page. I have this HTML:
<section class="recipes-overview">
<h1><strong>23</strong> Recepten</h1>
<ul class="recipes-list">
<li></li>
<li></li>
<li></li>
</ul>
Laad volgende recepten
</section>
When you click on the a href button. Then, three li items. When you press it again. Are there three more li items.
But now come the problem. When I click on the a button. The data is coming from the backend. The page is refreshing.
But, refreshing the page yourself and you're back at the top of the page.
You need to refresh will go to this section. How can I make that?
Use html
<p><a name="top"></a></p>
<p>...</p>
<p>Top</p>
Or use jQUery
.scrollTop()
http://api.jquery.com/scrollTop/