I had script setup to toggle show/hide divs on a page with menu items.
However I wanted to load external HTML into one of them and was running into issues.
Now I am wanting to just having the menu items load external HTML into a single div.
I can't seem to make it work though and I want to have a menu like this:
<div id="topmenu">
<a href="#" >Home</a>
<a href="#" >Videos</a>
<a href="#" >Follow</a>
<a href="#" >Contact</a>
</div>
Each item loads a different HTML into a div like this using jQuery:
<article>
<div id="bodycontent">
...
</div>
</article>
If you want to add or means to say load external html then you need to add some java scrip.Let take your example.
<div id="topmenu">
<a href="#" id='homeTab'>Home</a>
<a href="#" id='videoTab'>Videos</a>
<a href="#" id='followTab'>Follow</a>
<a href="#" id='contactTab'>Contact</a>
</div>
See I've added individual id to each now you need to call a load function of js
$("#homeTab").on('click',function(){
//firstly clear html part
$('#bodycontent').html('');
$('#bodycontent').load('hometab.html');//put your exact loaction of html file in my case I'm assume both are in same folder.
});
That's it all done you can do like this.
Hope it will work for you.
Related
I have a single page application written using knockout/jquery. However, I am struggling to find a better way to handle what view to show. As i need more menu items you can see how the code will be more unmanageable. I would like to be able to show a view based on what is selected and change the CSS so you can see which tab is selected too.
<div class="col-md-2 sidebar">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" data-bind="click: ShowDashboard, css: DashboardSideBarCss">
Dashboard
</a>
<a href="#" class="list-group-item list-group-item-action non-active-sidebar"
data-bind="click: ShowCompanyDetails, css: CompanyDetailsSideBarCss">
Company Details
</a>
<a href="#" class="list-group-item list-group-item-action non-active-sidebar"
data-bind="click: ShowEmployees, css: EmployeesSideBarCss">
Employees
</a>
<a href="#" class="list-group-item list-group-item-action non-active-sidebar"
data-bind="click: ShowEtc, css: EtcCss">
etc....
</a>
</div>
</div>
use a single class/click for the view change-links and add a new attribute containing a "key" of your view, sth like:
<a href="#" data-view="dashboard" data-bind="click: changeContent">
in your changeContent function read the attribute and set it to a new observable e.g 'currentView'
sth. like:
vm.currentView($(this).attr('data-viewkey'))
(or however you are used to code)
you can then just show the correct content like:
<div style="display:none" data-bind="visible:vm.currentView()=='dashboard'" >
....
or you can toggle an 'activeclass'
data-bind="attr:{class:'static_classes '+(vm.currentView()=='dashboard' ? 'active' : 'inactive' )}"
or add individual dynamic selectors
data-bind="attr:{class:'content_'+vm.currentView()}"
tl;dr introduce a new observable holding a "viewkey" on which everything is based on and you can do whatever you want
Sorry if this is such a 'newbe' question, been fighting this for a while...
Seeking to fire an <a href> from within a tag.
Found several ways to do it, however.. the entire script is with-in an <ul>, so script to "click" the <a href> occurs on load of index.html, not when the specific tag is called.
Sorry if confusing; here are some snippets of code that may help explain.
<ul id="menu">
<!-- several <li> to other parts of the site, then: -->
<li>
<a href="#!/WORKHISTORY" onclick="ga('send','event','Internal Links','Work History')">
<span class="over"></span>
<span class="txt1">Work History</span>
</a>
</li>
</ul>
Followed by:
an <article> and a <ul>
Within the <ul>, is a tag referencing the "workhistory" tag.
<li id="WORKHISTORY">
<div class="box">
<a id=wrkhst1 href="/gallery/1426894494/1426894576.jpg" rel="prettyPhoto[1426894494]">
<span class="over"></span>
</a>
</div>
</li>
I have tried to use <script>document.getElementById('wrkhst1').click();</script>
Which works, however it fires at the load of index.html, not with the click of the parent <li>, as it reads the main index page and loads it.
I tried the same script this in the and not using the tag, but same result.
You need to add an eventhandler, for the onclick-event, on the li element. There you simulate the click on the <a> tag.
In code it could look like:
document.querySelector('#WORKHISTORY').onclick = function(){
document.querySelector('#wrkhst1').click();
};
BUT there are very few scenarios where this is needed. I'm sure in your case it would be better to make the <a> display: block; and set it to the size of the <li>. So <a> can do for what it was made for, without any need of javascript.
I have an html menu with links to other pages which have this menu included too. Very basic:
<div id="sidebar-nav">
<ul id="dashboard-menu">
<li class="active">
<div class="pointer">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<a href="index.html">
<i class="icon-dashboard"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="1.html">
<i class="icon-signal"></i>
<span>1</span>
</a>
</li>
<li>
<a href="2.html">
<i class="icon-picture"></i>
<span>2</span>
</a>
</li>
<li>
<a href="3.html">
<i class="icon-calendar-empty"></i>
<span>3</span>
</a>
</li>
</ul>
</div>
So basically this menu helps navigate through content.
When I load the home of the menu I want a function to automatically load the other links too so it speeds up the navigation and of course I want the content of those links to show up only when the corresponding link in the menu is clicked.
What library / function should I look into to achieve that?
Which Library or Function to use
You can see, in my code everything is jQuery. So in my advice, jQuery will be the best for you! You can have it here:
api.jquery.com or even at their site www.jquery.com You can have a quick link at their footer tag.
Pages will be cached
Your page and some of its code is saved as a cache in the local storage, you can check them out using F12. Which will open Developer Tools, then in Network workspace, check out which are loaded from Server and which are loaded from local storage. Almost every browser will save some of your code, from .css files or your scripts so that it doesn't have to load it everytime. You can see the code 304 (correct me, if mistaken) in browser which would mean that the file was loaded from local machine. So don't worry about this. You can get other helpfull articles about speeding up and caching the sessions too.
Dynamically Creating the menu
To dynamically create the link navigation menu you can use:
Example
$('#dashboard-menu').html();
In the HTML of the code, you can write the list items. Which will be set so that you get them. You can call this function on page start as:
Code Example
$(document).ready(function () {
$('#dashboard-menu').html();
}
Techniques
If you don't know what would be the menu, for example you want to load the data from Database, you can use ajax requests too, this way you will write the result in the dashboard-menu. However, your site won't get fast just by removing the navigation menu and laoding it after the page load.
For example:
$.ajax({
url: "page_to_load.html"
success: function (data) {
$('#dashboard-menu').html(data);
}
});
Alternate way of using Ajax
Alternate way for this is load().
http://api.jquery.com/load/
To show only relative menu
To show the content you can use show(). Like this, lets take the example from your code
Snippet from your code
<li>
<a href="1.html">
<i class="icon-signal"></i>
<span>1</span>
</a>
</li>
Showing child
To show the a from this; since a is a child of li, you can use this:
$('li').click(function () {
$(this).find('a').show(); // or even use toggle()
}
Lets say you have a unordered list with just icons (here only one):
<ul>
<li class="in-row"><a href="#" id="meddelanden" data-content="Content here..."
data-title="Meddelanden" data-toggle="clickover" data-placement="left">
<i class="icon-globe"></i></a>
</li>
</ul>
With these included files to your html document:
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script>
$('#meddelanden').popover('animate');
</script>
It does appear fine and the content is shown when i press the icon, but i would like to have some links and breaks and stuff in that popover container. How can i do this?
You don't need to use javascript for that. You can use data-html and data-content in order to achieve that.
Try setting data-html="true" and insert escaped html into your data-content attribute.
Just like this:
<ul>
<li class="in-row"><a href="#" id="meddelanden" data-content="<hr>Sample html<br>"
data-title="Meddelanden" data-toggle="clickover" data-placement="left" data-html="true">
<i class="icon-globe"></i></a>
</li>
</ul>
Some text editors provide built-in HTML Escape tools. If your editor doesn't, you can use an online tool like this one:
http://www.htmlescape.net/htmlescape_tool.html
Update:
Another approach is to add your markup to the html document itself (as a hidden container)
and create the tooltip using javascript:
HTML
<div id="tooltip-content" style="display: none;">
<p>Tooltip content goes here</p>
</div>
Javascript
$('#element').tooltip({
html: true,
title: $('#tooltip-content').html()
});
This is a better approach (in my opinion). Easier to read and maintain - no HTML inside your javascript or inside the attribute data-content.
Yes you can. Try using the popover content and html attributes...
See Doc
http://jsfiddle.net/4jhzg/
html
<ul>
<li class="in-row"><a href="#" id="meddelanden"
data-title="Meddelanden" data-toggle="clickover" data-placement="right">
<i class="icon-globe"></i></a>
</li>
</ul>
Script
var elem = '<div>google</div>';
$('#meddelanden').popover({animation:true, content:elem, html:true});
I know this is a real newbie question, but that's what I am! I've been playing with ajax, and I have these two images swapping when I press the two buttons.
Question: How do I make the button have the active state displaying while it's corrisponding image is displaying?
I'm sure I need to do something like set an id on the image, but other than that, I'm not sure...
My code (I'm not displaying the ajax stuff that is making the image swap, because I doubt you need that too):
<div class="wrapper">
<div class="transcriptionbuttons">
<ul class="transcript">
<li class="transcript"><a class="transcriptionhorbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback)"></a></li>
<li class="transcript"><a class="transcriptionvertbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback)""></a></li>
</ul>
</div>
<div class="transcriptimage" id="targetDiv">
<img src="this gets populated with ajax..." alt="">
</div>
</div>
Thank you!
Joel
Edit:
Sorry it wasn't clear. The list items are buttons. Click a list item, and it loads an image in targetDiv. I want the button that is "active" to remain active.
If I understood the question.... you could, for example,
<img id="targetImg" src="this gets populated with ajax..." alt="">
and in your JavaScript callback
document.getElementById("targetImg").setAttribute("src", "new_image_source.jpg");
EDIT
If instead you meant you wanted to change the <a> tag when clicked, you could...
<li class="transcript">
<a class="transcriptionhorbutton"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
and pass this into a function which will make the changes you want (admittedly that part is a little unclear)
EDIT 2
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
function deactivate_buttons() {
buttons[0].setAttribute("class","inactive");
buttons[1].setAttribute("class","inactive");
}
</script>
It's not the prettiest solution, but it should give you an idea of how the problem can be solved