I've got a list and I want to input a data from it by the table of arrays and I don't have idea how .
Here is the code and my attempts:
HTML:
<body>
<div class="top-menu style4"style="margin-top:300px;">
<ul class="top-menu-main">
<li>
<ul class="top-submenu">
<li><a class="up_items"style="padding-top:5px;">SEMINARS</a></li>
<li><a class="up_items"style="padding-top:5px;">STATUTES</a></li>
<li><a class="up_items"style="padding-top:5px;">RÉSUMÉ</a></li>
<li><a class="up_items"style="padding-top:5px;">ADR & PPCs</a></li>
<li><a class="up_items"style="padding-top:5px;">PREPARATIONS</a></li>
<li><a class="up_items"style="padding-top:5px;">MUSINGS</a></li>
<li><a class="up_items"style="padding-top:5px;">GLOSSARY</a></li>
<li><a class="up_items"style="padding-top:5px;">AWARDS</a></li>
</ul>
<a style="width:100px;text-align:center;text-align:center;font-family:arial;font-size:0.7em;font-weight:bold;border-top:none;">START</a>
</li>
</ul>
</div>
</body>
I've tried to do something with this script but what i got is a simple list without any slide, css elements and so on which i included in my code ..
JS:
<script type="text/javascript">
function makeMenu() {
var items = ['Start','Trident','Internet Explorer 4.0','Win 95+','5','5'];
var str = '<ul><li>';
str += items.join('</li><li>');
str += '</li></ul>';
document.getElementById('jMenu0').innerHTML = str;
}
window.onload = function() { makeMenu(); }
$(document).ready(function(){
$("#jMenu").jMenu();
})
</script>
There are some mistakes in your code.
Use the same jQuery ready function to load menu.
Use .class selector or #id to select the menu.
Don't include two times the UL tag.
Here is your code working:
function makeMenu() {
var items = ['Start','Trident','Internet Explorer 4.0','Win 95+','5','5'];
var str = '<li>';
str += items.join('</li><li>');
str += '</li>';
$('.top-menu-main').html(str);
}
$(document).ready(function(){
makeMenu();
$(".top-menu-main").menu();
});
You can check it here:
http://jsbin.com/irasof/1/edit
You haven't assigned an id to your unordered list.
the call
$("#jMenu").jMenu();
expects to find an element with the id jMenu.
Try adding that id in your js function
var str = '<ul id\"jMenu\"><li>';
take a look at the docs of that plug-in
And the line
document.getElementById('jMenu0').innerHTML = str;
tries to add the generated HTML inside an element with the id jMenu0. The HTML code you are showing does not contain such an element. You need to add it first, maybe somthing like that will be enough
<div id="jMenu0" />
Related
I would like to insert HTML code to make a "list". I've seen examples of innerHTML but that just replaces the existing code. How can I add more code without replacing the current code?
var addTo = document.querySelector(".activePage")[0];
var addHTML = '
<div id="item1">
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</div>'
addTo.innerHTML(addHTML)'
<nav class="activePage"><nav>
Use insertAdjacentHtml. Docs - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML.
var addTo = document.querySelector(".activePage");
var addHTML = '<div id="item1"><h1>This is a heading</h1><p>This is a paragraph</p></div>
addTo.insertAdjacentHtml(addHTML, 'beforeEnd')
'beforeEnd' means it will add right before the end of the element(inside the element).
You have to append to the HTML inside the nav tag instead of replace it with a new value.
var addTo = document.querySelector(".activePage");
var addHTML = '<div id="item1"><h1>This is a heading</h1><p>This is a paragraph</p></div>';
addTo.innerHTML += addHTML;
<nav class="activePage">
<nav>
Add your HTML to the existing HTML inside of the target element using +=.
function addNew() {
var addTo = document.querySelectorAll(".activePage")[0];
var addHTML = '<div id="item1"><h1>This is a heading</h1><p>This is a paragraph</p></div>'
addTo.innerHTML += addHTML
}
<nav class="activePage">
<button onclick="addNew()">add</button>
<nav>
I believe what you're after is the append feature.
https://api.jquery.com/append/
or
https://www.w3schools.com/jsref/met_node_appendchild.asp
Below is a jquery example. I have used this example as i think it's easier to understand what's going on at first glance
example:
$(".your_div").append(html_load());
function html_load() {
return '<li class="list"> list item </li>'
}
This will result in the below:
<div class="your_div">
<li>start</li>
</div>
being updated to:
<div class="your_div">
<li>start</li>
<li class="list"> list item </li>
</div>
I know this been posted here: how to split the string using jquery or javascript
but in my case have multiple strings. It's working in a single line of string but if it's in a multiple lines it repeats the day after year. and for some reason it display's only the first 'li' value. Is it possible to display it this way:
<ul>
<li>
<div class="date">
<p class='day'>23</p>
<p class='month'>05</p>
<p class='year'>2013</p>
</div>
</li>
<li>
<div class="date">
<p class='day'>25</p>
<p class='month'>07</p>
<p class='year'>2014</p>
</div>
</li>
<li>
<div class="date">
<p class='day'>01</p>
<p class='month'>05</p>
<p class='year'>2014</p>
</div>
</li>
</ul>
here is my code:
html
<ul>
<li><div class="date">23-05-2013</div></li>
<li><div class="date">25-07-2014</div></li>
<li><div class="date">01-05-2014</div></li>
</ul>
css:
.day{color:#ccc;}
.month{color:#ff0000;}
.year{color:green;}
script:
var data =$('.date').text();
var arr = data.split('-');
$(".date").html("<p class='day'>"+arr[0]+"</p>"+"<p class='month'>"+arr[1]+"</p>"+"<p cass='year'>"+arr[2]+"</p>");
jsfiddle:
demo
thanks Bon
You are getting the text from the first element, and changes all elements to contain the code for that. You need to loop through the elements and convert the content in each one.
You can use a callback function in the html method to do that, it will get the original HTML code from each element, and you return the new HTML code for that element:
$(".date").html(function(i, h) {
var arr = h.split('-');
return "<p class='day'>"+arr[0]+"</p><p class='month'>"+arr[1]+"</p><p class='year'>"+arr[2]+"</p>";
});
Demo: http://jsfiddle.net/Guffa/815c95jn/1/
(Note the difference in function, as this will get the HTML code in each element instead of the text. As long as there is no actual HTML markup in the elements, like in your example, there is no difference in the result.)
An alternative to splitting the text is to use replace:
$(".date").html(function(i, h) {
return "<p class='day'>" + h.replace("-", "</p><p class='month'>").replace("-", "</p><p class='year'>") + "</p>";
});
You only selected one .date, but you have to iterate over all of them, e.g. using $.each():
$(".date").each(function () {
var data = $(this).text();
var arr = data.split('-');
$(this).html("<p class='day'>" + arr[0] + "</p>" +
"<p class='month'>" + arr[1] + "</p>" + "<p class='year'>" + arr[2] + "</p>");
});
Adjusted Fiddle, and for reference: http://api.jquery.com/each/
Since the title asks about how to completed this with jQuery or Javascript (assuming vanilla JS) let me give a quick example of how this might be done without the need for jQuery:
var dates = document.querySelectorAll('.date');
var dateClasses = ['day', 'month', 'year'];
Array.prototype.forEach.call(dates, function(date){
var dateString = date.innerHTML;
var dateStringArray = dateString.split('-');
var content = "";
for(var i = 0; i < dateStringArray.length; i++){
var newDate = document.createElement('p');
newDate.classList.add(dateClasses[i]);
newDate.innerHTML = dateStringArray[i];
content += newDate.outerHTML;
}
date.innerHTML = content;
});
.day{color:#ccc;}
.month{color:#ff0000;}
.year{color:green;}
<ul>
<li><div class="date">23-05-2013</div></li>
<li><div class="date">25-07-2014</div></li>
<li><div class="date">01-05-2014</div></li>
</ul>
I've the elements as follows,
<div id="pager">
First
Previous
<a class="" href="/somepath/1">1</a>
<a class="Current" href="/somepath/2">2</a>
<a class="" href="/somepath/3">3</a>
Next
Last
</div>
and I want it to be changed as follows within browser.
<div id="pager">
First
Previous
<a class="" href="/somepath/1?a=text">1</a>
<a class="Current" href="/somepath/2?a=text">2</a>
<a class="" href="/somepath/3?a=text">3</a>
Next
Last
</div>
So that I can use the "a" data values to next page.
Can any one give me the code, which does the appends inside
div id="pager" -> <a> -> href="
and i wants to remove the added text with another onChange event.
Thanks in advance
Since jquery is tagged :
$('#pager a').each(function(){
this.href += '?a=text';
})
Vanilla JS would look like this :
var a = document.getElementById('pager').getElementsByTagName('a'),
length = a.length;
for(var i=0; i< length; i++){
a[i].href += '?a=text';
}
.attr(), like many jQuery functions, can take a function argument that modifies the existing value:
$('#pager a').attr('href',function(i,str) {
return str + '?a=text';
});
$('#pager a').each(function() {
$(this).attr('href', $(this).attr('href') + '?a=text');
});
Simply use the attr property. Example :-
$("a").attr("href", "http://www.google.com/")
This will do the job.
$("#pager").find("a").each(function(){
var $this=$(this);
$this.attr("href",$this.attr("href")+"?a=text");
})
you can use attr method
$('a').attr('href', '/somepath/1?a=text');
And if you want to change the href of a specific <a> give that '' a unique id and than change its href as follows
$('#link').attr('href', '/somepath/1?a=text');
Try this code :
$('#pager a').each(function(){
this.href += '?a=text'
})
I am creating tabs dynamically when an user clicks a menu. The referenced html file is opened within a iframe which is also created dynamically.
Everything worked fine but When the tab count exceeds '3' and the user clicks on the previous tab the next iframe gets displayed below the previous iframe content.
Below is the code i used. Can anyone suggest what should i do ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<script text/javascript>
$(document).ready(function() {
var c=0;
$("#documents a").click(function() {
c++;
addTab($(this),c);
return false;
});
$('#tab1 a.tab').live('click', function() {
// Get the tab name
i = 0;
var chk;
var contentname = $(this).attr("id") + "_content";
var ifid=$("#content .dcontent:last iframe").attr("id");
// hide all other tabs
if(ifid>1)
{
for(i=ifid;i>0;i--)
{
fr = document.getElementById (i);
if (fr.style.display!='none')
{
fr.style.display="none";
}
}
}
//make the current frame visible
var lnm=$(this).attr("name");
fr = document.getElementById (lnm);
if (fr.style.display=='none')
fr.style.display="block";
$("#tab1 li").removeClass("current");
// show current tab
$(this).parent().addClass("current");
});
});
/* Creation of Tab*/
function addTab(link,ct) {
// If tab already exist in the list, return
if ($("#" + $(link).attr("rel")).length != 0)
return;
// hide other tabs
$("#tab1 li").removeClass("current");
if(ct>1)
{
for(i=ct-1;i>0;i--){
fr = document.getElementById (i);
if (fr.style.display!='none')
fr.style.display="none";
}
}
// add new tab and related content
$("#tab1").append("<li class='current'><a class='tab' id='" + $(link).attr("rel") + "' name='"+ct+"' href='" + $(link).attr("href") + "' target='" + $(link).attr("target") + "'>" + $(link).html() + "</a><a name ='"+ct+"' href='#' class='remove' >x</a></li>");
var e = $('<div class="dcontent" ><li style="list-style:none;"><iframe id="'+ct+'" src='+$(link).attr("href")+' name="content" align="middle" width=600px; height=400px;> </iframe></li></div>');
$('#content').append(e);
}
</head>
<body>
<ul id="tabs">
<!-- Tabs go here -->
<div style="float: left;">
<ul id="menu">
<li> Next
<ul id="documents">
<li><a href="tab1.html" target="content" rel="1" >Document4</a></li>
<li><a href="tab2.html" rel="2" target="content" >Document5</a></li>
<li><a href="tab3.html" rel="3" target="content" >Document6</a></li>
<li><a href="tab4.html" rel="4" target="content" >Document6</a></li>
</ul>
</li>
</ul>
</div>
</ul>
<ul id="tab1">
<div style="float: left;">
</ul>
<div id="content">
</div>
A major issue is the way your IDing your elements. You have a variable c which is numeric, starting at 0, increases whenever a link is clicked, and then is set as the ID as one of your iframes. However, you are also setting numeric IDs to the created tabs. Eventually, these element IDs will overlap and you will have errors like these.
At the very least, make your iframes have the ID of
"frame_" + $(link).attr("rel")
rather than the ct numeric variable you are using now (copy of c)
so that an example ID may be "frame_2" for the button with rel attribute of 2. That way you won't have a button with rel attribute of 2 connected to some frame with a random numeric ID.
Get rid of the c variable completely.
Instead of this loop:
if(ct>1) {
for(i=ct-1;i>0;i--){
alert(i);
fr = document.getElementById (i);
if (fr.style.display!='none')
fr.style.display="none";
}
}
use:
$("#content").children("div.dcontent").each(function() {
var theFrame = $(this).find("li iframe");
if ($(theFrame).attr("id") != ("frame_" + $(link).attr("rel"))) {
$(theFrame).css("display", "none");
}
});
That way you can easily link the rel attribute to the frame's ID, rather than an arbitrary numeric value from your c variable.
You should use your rel attribute for everything, since you've given your links that. You could use use something like data-buttonid and use .data() to access it, but that's up to you.
Then when you ID everything, use that number to pair everything together. i.e.
Frame ID: "frame_" + $(link).attr("rel")
Tab ID/Name: "tab_" + $(link).attr("rel")
A Name: "tab_anchor_" + $(link).attr("rel")
Testing with the code I provided resulted in it executing how you want.
Not sure this is possible but maybe you can help.
I have a list, where the content of the <li>'s is generated by Javascript, through a function called showLink(); this function is on another server and it's not controlled by me.
The showLink(); function generates a html link. I am interested in the generated anchor text.
QUESTION: Is there a way I can use Jquery to get the anchor text of that link into a Jquery variable?
Here is the code:
<ul class="my_list">
<? $zero = '0';
for($rn = 1; $rn <= $traffic_rows_nr; $rn++){ ?>
<li><script language="JavaScript">showLink(<? echo $rn; ?>)</script></li>
<? } ?>
</ul>
Thank you!
Something like
var anchorText = $("ul.my_list li a").text();
or...
var anchorText = [];
$("ul.my_list li a").each(function() {
anchorText.push($(this).text());
})
// anchorText is now an array of the text in all the anchors in the list
var text = $(".my_list a").text(); Should do it