I have multiple office websites that use the same navigational dropdown menu in the page header to allow site visitors to easily jump to another office website. I have designed the dropdown menu, but I am unsure how to approach the server side coding aspect so the dropdown menu knows what is the active office page the visitor is currently on. I have 3 office websites:
Office Location 1
Office Location 2
Office Location 3
My menu structure is: (also JSFIDDLE here)
<section id="ad_banner" class="container">
<div class="network">
<span class="abc_network">ABC Services</span>
<div class="dropdown" style="display:inline-block;">
Office Location 1 <i class="fa fa-caret-down"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="1" href="index-header2.php">Office Location 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="1" href="index-header3.php">Office Location 3</a></li>
</ul>
</div>
</div>
Rather than having to update all the office pages manually when new office locations are added, I want to include the dropdown code into my office page template (I'll use a PHP include unless someone has another suggestion). I'm guessing I'll add a php variable at the top of each office location page like $page = "office location 1" and then add it to the global dropdown menu code somehow. I just don't know how to have the dropdown menu autoselect the page. Help!
I used an iframe to achieve this.
Edited: Here is the Fiddle: http://jsfiddle.net/yrf81u0c/5/
The iframe code:
<iframe src="#" width=100% height= 500px>
<p>Your browser does not support iframes.</p>
</iframe>
The Jquery:
$('a').click(function(event){
event.preventDefault();
var site = $(this).attr("href");
$('iframe').attr("src",site);
var value = $(this).text();
$("#top").text(value);
});
Related
I have page on my SharePoint site that has toolbar (call it toolbar page). All items/elements in that toolbar are actually links to offsite locations, that are not on SharePoint at all.
Toolbar page consists of two web parts both content editor web parts, one where toolbar is and the other where I intended to put iframe code. To be more clear, I want to see off-SP pages on my Toolbar page when I click on any element in toolbar but to still stay on same toolbar page (just to get web part load off-SP pages).
Example: Toolbar:
<ul>
<li class='has-sub'><a href='#'>Item 1</a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
</ul>
iframe web part:
<script type="text/javascript">
function Navigate(file) {
document.getElementById('iframe1').src=file;
}
</script>
<iframe name="iframe1" id=iframe1 src="homepage link" width="1280px" height="1024px" scrolling="auto">
</iframe>
So my question is, can this code be edited so page can work correctly or what should I do to make it work? Any suggestion and help is greatly appreciated.
I finally found solution for this one.
In a tags person should just put target="optional word exp. MyFrame" after a href="#".
So it should look like this
<a href="#" target="MyFrame">
In iframe part of code just put
<iframe name="MyFrame" src="#"></iframe>
functionality:
User clicks on the link in page A, it will prompt a pop-up. The pop-up is displaying separate web-browser thread which is an overlay over the page A which will turn opaque.
What has been done:
This is the code that has been done to enable to pop-up web browser:
$('link1').click(function() {
$('#subscribe-pop1’).toggle();
});
<div id="footleft">
<ul>
<li><a href="#" id='link1'>India, Mumbai</a>
</li>
<li><a href="#" id='link2'>India, New Delhi</a>
</li>
<li><a href="#" id='link3'>India, Chennai and Banglalore</a>
</li>
<li><a href="#" id='link4'>United Arab Emirates, Dubai</a>
</li>
</ul>
</div>
<div id="subscribe-pop1" style="display:none">
<iframe src="http://www.w3schools.com/js/">
</iframe>
</div>
Issue:
When I try to click on the link, it will only work for some of the url links. It will work if the url link is "http://www.w3schools.com/js/" but it may not work for "http://www.youtube.com".
It will only display a white screen for url that is not called.
I would like to know why is that so that the following href is only able to call on some url but not the rest and how am I able to rectify this issue?? thanks
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
This question already has answers here:
How can I keep selected Bootstrap tab on page refresh?
(19 answers)
Closed 7 years ago.
I have implemented nav-tabs in my project using bootstrap.When we enter the application,Home tab is active.When i make changes in the other tabs and press save button,the page is going to the Home tab.
I want the tab on which i've made changes to be active.
The below is similar code i've used in my project.
HTML
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
Fiddle here
First, you need to add the selected tab hash to the url.
Here's an example with JQuery :
$('a[data-toggle="tab"]').click(function(e) {
var hash = $(this).attr('href');
location.hash = hash;
});
Next, you need to show the tab linked to the hash added to the url when you load the page :
$(function() {
var hash = window.location.hash;
var $nav = $('ul.nav a[href="' + hash + '"]');
hash && $nav.trigger('click');
});
It seems, basically what you need to do, is to add the class active to the <li> tag, when entering the page, and removing it from other <li> elements.
<li class="active">
<a data-toggle="tab" href="#about" aria-expanded="false">
About
</a>
</li>
You could achieve that with jQuery. Just set the appropriate class during page initialization. With jQuery you will also have to bind the appropriate events to the elements, as Martin Lezer explains in his answer:
The question is, how to you remember the state of the application between refreshs. Here are some possibilities:
Cookies: Set a cookie with the status, each time you click on a tab
Local storage or session storage of the browser. Same principle as 1
Location-Hash: see answer of Martin Lezer here.
URL-Parameters: You could use those to remember the app-state, but I would recommend against it, because usually you do not want to have this kind of information in the URL.
1 and 2 are persistent, that means, you can come back tomorrow and the application can init with the same state
3 and 4 are not persistent, you need to pass that information each time you enter the application (which is fine, during a session)
Hope that helps.
ok I am a bit rusty with jquery and new to jquery mobile so go easy on me ;). Ok I am creating a mobile website with jquery mobile and it has a lot of pages so rather than keep all the pages in one large multi-page template I have them in seperate page templates. I have a menu button that when clicked a popup appears with a listview menu in it, this works but I have to put the menu in every page template but I would rather just keep the menu in its own html file or even just somewhere in the dom that is outside the jquery mobile page structure so that I dont have to repeat the code in each page template.
How to I load the menu into the popup when its located in its own file? Failing that how do I load a div into that popup that is not inside a jquery mobile page?
My button:
Menu
my listview menu html:
<div data-role="popup" id="main-menu">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Menu
</li>
<li data-theme="c">
<a href="#how-it-works" data-transition="slide">
How it Works
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/buy-now/levels.html" data-transition="slide">
Order Now
</a>
</li>
<li data-theme="c">
<a href="#faq" data-transition="slide">
FAQ
</a>
</li>
<li data-theme="c">
<a href="#help" data-transition="slide">
Help
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/support.html" data-transition="slide">
Support
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/" data-transition="slide">
Main Website
</a>
</li>
</ul>
</div>
In a general sense, here is how you can load html from an external file into a div, beyon that, I am not quite certain what you are trying to do exactly:
$('#myDiv').load('somepath/somefile.html');
I have the exact same problematic, I have written something that displays the popup but partially renders the CSS [edit] a few more tries and I was able to make it render CSS perfectly:
$('[data-role=page]').live('pageshow', function (event, ui) {
$('#'+event.target.id).find('[id=main-menu]').load('menu.html', function(){
$('#'+event.target.id).find('[id=main-menu]').trigger('create');
});
});
Btw your main html page should contain the div declaration:
<div data-role="popup" id="main-menu"></div>
Menu
And your menu.html should contain only what's inside the div:
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<!-- .... listview content ... -->
</ul>