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});
Related
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
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.
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 used "enscroll" js scroll bar in my page. http://enscrollplugin.com/#demos
<div id="enscroll_name">
<ul>
<li id="p1">product1</li>
<li id="p2">product2</li>
<li id="p3">product3</li>
<li id="p4">product4</li>
<li id="p5">product5</li>
</ul>
</div>
On Page load the product3 need to be in the visible area. I used <a name="p3"></a> for this. But in query how to achieve this? In html we used anchor name tag like <a name="p3"></a>. But in this script how to achieve this?
You can use .scrollTop() jquery function to visible whatever the area that you want inside the div.
Try like this..
$('#yourdiv').scrollTop($("p[name='p2']").height());
Check the sample fiddle
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help