Hello I have code like this:
<body>
<div id="page">
<div id="header">declaration</div>
<div id="content">
<div id="option">
<span class='names'>
show chapter 1.1.1 content
</span>1.1.1 Chapter name<br />
<span class='names'>
<a href='#'>show chapter 1.1.1.1 content</a>
</span>1.1.1.1 Chapter name<br />
</div>
</div>
<div id="footer">declaration</div>
</div>
</body>
When user click on the show link, webpage open a HTML file and to print a content of the choosed chapter from file. (it is saved in content.html file, and content has id with name of chapter)
File example:
<div id="s1"><h1>1 Chapter</h1>
<div id="s1.1"><h1>1.1 Chapter</h1>
<div id="content1.1">
data
</div>
<div id="s1.1.1"><h1>1.1.1 Chapter</h1>
<div id="content1.1.1">
data
</div>
</div>
</div>
</div>
</div>
When user click on the "show chapter 1.1.1 content" webpage generate this code:
<body>
<div id="page">
<div id="header">declaration</div>
<div id="content">
<div id="s1.1.1"><h1>1.1.1 Chapter</h1>
<div id="content1.1.1">
data
</div>
</div>
</div>
</div>
<div id="footer">declaration</div>
</body>
I was trying this code but it is not working and I do not know how to open html file and parsed only some with with specific id
<script type="text/jscript" language="javascript">
var ul = document.querySelector('#option');
ul.onclick = function (e) {
var evt = e || window.event;
var target = evt.target || evt.srcElement;
var p = document.querySelector('#content');
p.innerHTML = 'Clicked on ' + target.innerHTML;
return false;
};
</script>
I'm not sure exactly what you're trying to do, but the code below makes things look a little cleaner.
<script type="text/jscript" language="javascript">
setTimeout(function () {
var spanNames = document.querySelectorAll('.names'),
content = document.querySelector('#content');
for (var i = 0; i < spanNames.length; i++) {
spanNames[i].onclick = function () {
content.innerHTML = 'Clicked on ' + this.querySelector('a').innerHTML;
return false;
};
};
}, 1000);
</script>
If you're trying to retrieve a html file on a remote server and add its content to a DOM element then you're missing a lot of code, as in the AJAX call.
Related
When I create a form with the write () command, then I want to delete it, but I can't. What is the cause of this problem?
In order to do this correctly, what command should I use or what should I change in my code?
var btn = document.querySelector('#btn');
var btn_alert = document.querySelector('#btn-alert');
var content = document.querySelector('.popup-container');
var div1 = document.getElementById('div1');
function message(message, btn) {
document.write('<div id="div1"><div id="content" class="popup-container"><div class="box-item"><div class="icon-success"><span class="span1"></span> <span class="span2"></span><div class="ring"></div></div><h2 class="alert-title">Good job!</h2><div class="alert-content">' + message + '</div><div class="actions-btn"><button onclick="ok()" class="btn-alert" id="btn-alert">' + btn + '</button></div></div></div></div>')
}
function ok() {
div1.removeChild(content);
}
<button class="btn-alert" id="btn">OK</button>
<!-- <div id="content" class="popup-container dis-active">
<div class="box-item">
<div class="icon-success">
<span class="span1"></span>
<span class="span2"></span>
<div class="ring"></div>
</div>
<h2 class="alert-title">Good job!</h2>
<div class="alert-content">is ok.</div>
<div class="actions-btn">
<button class="btn-alert" id="btn-alert">OK</button>
</div>
</div>
</div> -->
<script src="script.js"></script>
<script>
message("خوش اومدی!", "کلیک کن");
</script>
document.write is really outdated. In your script you write the elements to the document after you're trying to retrieve them. That won't work.
Here is an example snippet using insertAdjacentHTML to create a message element with a button to remove it.
It is generally not a good idea to use inline event handlers. The snippet uses event delegation to handle button clicks.
It may be wise to first learn more about html document manipulation or javascript.
document.addEventListener(`click`, handle);
const create = () => message(`خوش اومدی!`,`کلیک کن`);
create();
function handle(evt) {
if (evt.target.id === `btn-alert`) {
document.getElementById('div1').remove();
}
if (evt.target.id === `recreate`) {
create();
}
}
function message(message, btnTxt) {
document.body.insertAdjacentHTML(`beforeEnd`, `
<div id="div1">
<div id="content" class="popup-container">
<div class="box-item">
<div class="icon-success">
<span class="span1"></span>
<span class="span2"></span>
<div class="ring"></div>
</div>
<h2 class="alert-title">Good job!</h2>
<div class="alert-content">${message}</div>
<div class="actions-btn">
<button class="btn-alert" id="btn-alert">${btnTxt}</button>
</div>
</div>
</div>
</div>`);
}
<button id="recreate">(re)create message</button>
I implemented a chatroom by HTML and Javascript recently.
I don't know how to append the message(class="chat self") to the "chat-container" when I click the button "Send".
Here is the code:
<div id = "chat-container" class="chat-container">
<div class="chat friend">
<div class="user-photo"><img src="images/james.jpg"></div>
<p class="chat-message">How are you?</p>
</div>
<div class="chat self">
<div class="user-photo"><img src="images/curry.jpg"></div>
<p class="chat-message">Fine, thx!</p>
</div>
<div class="chat friend">
<div class="user-photo"><img src="images/james.jpg"></div>
<p class="chat-message">How old are you?</p>
</div>
</div>
<div class="chat-form">
<textarea id="myTextarea" placeholder="Type your message"></textarea>
<button onclick="sendMes()">Send</button>
</div>
My idea is like this:
<script>
function sendMes() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
vara data =
'<div class="chat self">
<div class="user-photo"><img src="images/curry.jpg"></d-wiv>
<p class="chat-message">Fine, thx!</p>
</div>';
data.chat-message = x;
document.getElementById("chat-container").appendChild(data);
}
</script>
I've read a lot of articles about HTML DOM, but they only tell how to change the .innerHTML...
I don't know how to create an div object with class="chat self", and set the object's chat-message to the value in the textarea.
Thanks a lot!
Instead of appending a DOM element to #chat-container you are simply appending a string to it (and that too seems to be malformed)
Maybe you should checkout W3School
A sample implementation of the sendMes() could be like
function sendMes() {
var message = document.getElementById("myTextarea").value // maybe try to sanitize it if you are sending it to server
var messageEl = document.createElement('p')
messageEl.innerHtml = message;
messageel.className = "chat-message"
var userImage = new Image()
userImage.src = "images/curry.jpg"
var imageContainer = document.createElement("div")
imageContainer.appendChild(userImage)
imageContainer.className = "user-photo"
var container = document.createElement("div")
container.appendChild(imageContainer)
container.appendChild(messageEl)
container.className = "chat self"
document.getElementById("chat-container").appendChild(container)
}
I have an iframe on which it opens a page which has three links.
I want to show the div on one of its links. Please suggest what to do.
Here is my code:
<div id="divTest" runat="server" >
this is a test div // Hide this div
</div>
<div class="inner-ca" style="width: 981px;">
<div class="main" style="width: 932px;">
<div id="page_FAQ">
To have a full view click here
<h2>Locate Us</h2>
<div class="box1_bot">
<div class="box1_left">
<div class="box1_right">
<div class="box1" style="border:0px;">
<iframe src="Default.aspx" width="100%" height="675" style="position: relative;"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please suggest..!!!
Plain JS assuming both pages from same origin.
I gave the iFrame an ID and an onload
Working example
function assignHandler() {
var ifr = document.getElementById("iframe1");
var iframeDocument = ifr.contentDocument || ifr.contentWindow.document;
var links=iframeDocument.getElementsByTagName("a");
for (var i=0;i<links.length;i++) {
links[i].onclick=function() {
var div = parent.document.getElementById("divTest");
if (div) div.style.display=this.href.indexOf("Locker")!=-1?"block":"none";
return false; // remove when link is needed
}
}
}
I'm using the Multi Page Template (all pages and javascriot in one html file). I just restructure my jQuery mobile app:
Before: all JavaSripts in the html file, example:
<div data-role="page>.....<script></script> </div>
Now: all JavaScripts are outsourced in a own file. But now comes the problem:
I'm searching after addresses at one page. Each result is stored in a history (localStorage). So the user can use the search or click on old history search results.
Since I outsourced the script for this page, the history doesn't work. I will show you the working code and the not working code:
Working code - pre outsourced:
This code works. JavaScript is in page div:
<div data-role="page" id="searchPage" class="bg-light">
<div data-role="content">
<div id="content-search">
<p><input type="text" name="address" id="address" class="stored" value="" /></p>
<p><input type="submit" id="submitAddress" value="Search" data-theme="a" data-corners="false" /></p>
</div>
<div id="searchHistory">
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-c">
<h3>History:</h3>
</div>
<div class="ui-body ui-body-c">
<div id="lastResults" class="ui-body ui-body-c ui-corner-all"></div>
</div>
</div>
</div>
</div>
<script>
......
// check and show previous results in **lastResults** div
if (localStorage.getItem("history") != null) {
var historyTemp = localStorage.getItem("history");
var oldhistoryarray = historyTemp.split("|");
oldhistoryarray.reverse();
$("#lastResults").empty();
jQuery.each( oldhistoryarray, function( i, val ) {
$("#lastResults").append(
"<ul data-role=\"listview\" data-inset=\"true\" >" +
// store history in localStorage
"<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
"</ul>"
);
// max. history
if (i==3) {
return false;
}
});
} else {
// hide search history
console.log("no history");
$("#searchHistory").hide();
}
function getHistory(i){
localStorage.setItem('address', oldhistoryarray[i]);
}
</script>
</div>
Not Working code - JS outsourced in own file:
JavaScript is now in own file (function.js):
index.html:
detail code see above
<div data-role="page" id="searchPage" class="bg-light">
<div data-role="content">
</div>
<script></script>
</div>
function.js:
// check and show previous results in **lastResults** div
if (localStorage.getItem("history") != null) {
var historyTemp = localStorage.getItem("history");
var oldhistoryarray = historyTemp.split("|");
oldhistoryarray.reverse();
$("#lastResults").empty();
jQuery.each( oldhistoryarray, function( i, val ) {
$("#lastResults").append(
"<ul data-role=\"listview\" data-inset=\"true\" >" +
// store history in localStorage
"<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
"</ul>"
);
// max. history
if (i==3) {
return false;
}
});
} else {
// hide search history
console.log("no history");
$("#searchHistory").hide();
}
function getHistory(i){
localStorage.setItem('address', oldhistoryarray[i]);
}
if you are not executing your script after the page has finished loading, there's a chance queries like $("#searchHistory") might be returning empty.
Make sure you execute your script in a callback that is called at the onload event.
so I'd suggest something like this (please also check that you initialize your "history")
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="function.js"></script>
<script>
$(document).on( "pagecreate", function( event ) {
console.log("page created")
$('#submitAddress').on('click',function(){
makeHistory();
})
});
</script>
</head>
<body>
<div data-role="page" id="searchPage" class="bg-light">
<div data-role="content">
<div id="content-search">
<p><input type="text" name="address" id="address" class="stored" value="" /></p>
<p><input type="submit" id="submitAddress" value="Search" data-theme="a" data-corners="false" /></p>
</div>
<div id="searchHistory">
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-c">
<h3>History:</h3>
</div>
<div class="ui-body ui-body-c">
<div id="lastResults" class="ui-body ui-body-c ui-corner-all"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
function.js then would be
// check and show previous results in **lastResults** div
function makeHistory()
{
if (localStorage.getItem("history") != null) {
var historyTemp = localStorage.getItem("history");
var oldhistoryarray = historyTemp.split("|");
oldhistoryarray.reverse();
$("#lastResults").empty();
jQuery.each( oldhistoryarray, function( i, val ) {
$("#lastResults").append(
"<ul data-role=\"listview\" data-inset=\"true\" >" +
// store history in localStorage
"<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
"</ul>"
);
// max. history
if (i==3) {
return false;
}
});
} else {
// hide search history
console.log("no history");
//and you probably need to initialize your history here, something like
localStorage.setItem("history", "lalala");
$("#searchHistory").hide();
}
}
function getHistory(i){
localStorage.setItem('address', oldhistoryarray[i]);
}
Now the pagecreate event also binds a behaviour to your search button to actually update the history each time it is clicked.
I am trying to use a link to open a specific tab that is created using divs and the tabs open and close using javascript.
Here are the tabs and the javascript is within the script tags at the bottom:
<div class="span12 module_cont module_tabs">
<div class="shortcode_tabs">
<div class="all_heads_cont">
<div class="shortcode_tab_item_title it1 head1 active" data-open="body1">%%LNG_ProductDescription%%</div>
<div class="shortcode_tab_item_title it2 head2" id="reviews" data-open="body2">%%LNG_JS_Reviews%%</div>
<div class="shortcode_tab_item_title it3 head3" data-open="body3">%%LNG_JS_ProductVideos%%</div>
<div class="shortcode_tab_item_title it4 head4" data-open="body4">%%LNG_JS_SimilarProducts%%</div>
</div>
<div class="all_body_cont">
<div class="shortcode_tab_item_body body1 it1">
<div class="ip">
%%Panel.ProductDescription%%
</div>
</div>
<div class="shortcode_tab_item_body body2 it2">
<div class="ip">
%%Panel.ProductReviews%%
</div>
</div>
<div class="shortcode_tab_item_body body3 it3">
<div class="ip">
%%Panel.ProductVideos%%
</div>
</div>
<div class="shortcode_tab_item_body body4 it4">
<div class="ip">
%%Panel.SimilarProductsByTag%%
%%Panel.ProductByCategory%%
%%Panel.ProductVendorsOtherProducts%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
</div>
</div>
</div><!-- .shortcode_tabs -->
<script type="text/javascript">
jQuery('.shortcode_tabs').each(function(index) {
/* GET ALL HEADERS */
var i = 1;
jQuery('.shortcode_tab_item_title').each(function(index) {
jQuery(this).addClass('it'+i); jQuery(this).attr('whatopen', 'body'+i);
jQuery(this).addClass('head'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_heads_cont').append(this);
i++;
});
/* GET ALL BODY */
var i = 1;
jQuery('.shortcode_tab_item_body').each(function(index) {
jQuery(this).addClass('body'+i);
jQuery(this).addClass('it'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_body_cont').append(this);
i++;
});
});
jQuery('.shortcode_tabs .all_body_cont div:first-child').addClass('active');
jQuery('.shortcode_tabs .all_heads_cont div:first-child').addClass('active');
jQuery('.shortcode_tab_item_title').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
jQuery('reviews').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
</script>
</div><!-- .module_cont -->
All I want to do is have a link on the same page that activates the reviews tab (id="reviews") and is also known as the body2.
all I have so far for my link is:
Reviews
Help. My brain hurts...
You just need to set the link up so that it doesn't take the user to a new page, and then setup a click event to open the tab up. Example:
HTML:
<a href='javascript:void(0);' id='reviewLink'>Review Tab</a>
JavaScript:
$('#reviewLink').click(function() {
$('.shortcode_tab_item_body').css({display:'none'});
$('.body2').css({display:'none'});
});
Or a jsfiddle here: http://jsfiddle.net/tKLhn/