Doesnt attribute nodes count as children in DOM?
My page here is like this 5 children in the body: text > h1 > text > div > text > //end of 5 children
But doesnt the attributnodes count? Shouldnt the childNodes property return an array of all types of nodes? With text > attribute > text > h1 > attribut > text > div > attribut > text > p //etc...
I have this page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM testing</title>
<script src="scripts/domTesting3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body bgcolor="#cccccc">
<h1 id="test">Test</h1>
<div id="content">
<p>Examining the DOM2 Core and DOM2 HTML Recommendations</p>
<h2>Browsers</h2>
<ul id="browserList">
<li id="chromeListItem">
Chrome
</li>
<li id="firefoxListItem">
Firefox 5.0
</li>
<li>
Microsoft Internet Explorer 9
</li>
<li>
Safari
</li>
<li>
Opera 9
</li>
</ul>
</div>
</body>
</html>
with this script:
function domTest() {
var le = document.body.childNodes.length;
alert(le);//alerts 5 children where are attribut nodes?
for(i = 0; i < le; i++) {
alert(document.body.childNodes[i].nodeType);
alert(document.body.childNodes[i].nodeName);
alert(document.body.childNodes[i].nodeValue);
}
}
window.onload = domTest;
Attr objects inherit the Node interface, but since they are not actually child nodes of the element they describe, the DOM does not consider them part of the document tree. Thus, the Node attributes parentNode, previousSibling, and nextSibling have a null value for Attr objects
From the Attr interface description of DOM Level 2 Core.
Related
HTML:
<div id="my-id">
<li class="list_element">
<div class="my_class"></div>
</li>
<li class="list_element">
<div class="another_class"></div>
</li>
<li class="list_element">
<div class="class3"></div>
</li>
</div>
What I want to do with behat/mink:
$page = $this->getSession()->getPage();
$selector = $page->find('css', "#my-id .my_class"); //here I need anchor element located near to .my_class div.
I don't know in which one .list_element .my_class div is. I know only anchor is next to .my_class element. Which selector should I use in the find() function?
Try one of these:
#my-id .my_class ~ a
#my-id .my_class + p
#my-id .list_element a
This is too basic question.Please see more here w3schools
Is there any plugin that transfoms html elements (span, div) into a form ? One example is when editing LinkedIn profile which convert the section to be modified into a form.
Thanks all !
JQuery has the Wrap method, which you can use to throw the whole div / span into a form.
$('.inner').wrap('<form class="newform" action="..." method="..." />');
Found here: http://api.jquery.com/wrap/
Consider the following HTML:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
Using .wrap(), we can insert an HTML structure around the inner elements like so:
$('.inner').wrap('<div class="new" />');
The new element is created on the fly and added to the DOM. The result is a new wrapped around each matched element:
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element; it should return a DOM element, jQuery object, or HTML snippet in which to wrap the corresponding element. For example:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
This will cause each to have a class corresponding to the text it wraps:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
Examples:
Example: Wrap a new div around all of the paragraphs.
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrap("<div></div>");</script>
</body>
</html>
I was impressed by the smoothness of the iScroll on iOS so i tried to implement it in my iPhone application.
The iScroll Demo works real fine on my iPhone. But only when the scrollable content is as simple as short text in <li> elements:
<ul id="thelist">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
etc..
</ul>
When i tried to put a slightly more complex contents :
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
The smoothness is completely gone, and the list hardly scrolls ..
Is there a way to make my contents lighter ?
Any suggestions whatsoever ? Thank you very much !
Here's how i declare my iScroll element:
myScroll = new $wnd.iScroll(
elem,
{
useTransition : true,
topOffset : pullDownOffset,
hScroll : false,
onRefresh : function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = 'pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
},
onScrollMove : function() {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
}
},
onScrollEnd : function(response) {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
app.#ma.xxx.xxxxx.clientcommon.utils.IPhoneScroller::callbackSuccess(Lcom/google/gwt/user/client/rpc/AsyncCallback;Lcom/google/gwt/core/client/JavaScriptObject;)(pullDownCallback,response);
}
}
});
[EDIT]
only by removing divs from:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<div class="cssDivStyle">
<img width="120px" height="74px" src="http://some_jpg_image.jpg">
</div>
<div>
<p>Some long text ....</p>
</div>
</li>
and making it to:
<ul>
<li class="GOE-WOTBDO GOE-WOTBIO GOE-WOTBEO " __idx="0">
<img class="cssDivStyle" width="120px" height="74px" src="http://some_jpg_image.jpg">
<p>Some long text ....</p>
</li>
Made the scrolling much, much faster !! I have no idea why!
The code below will render your page the way webkit expects it. So redrawing will be massively quicker.
The HTML
<body>
<div class="headerFix">
<div class="header">
<!-- The content in header...logo/menu/e.t.c -->
</div>
</div>
<div class="content"><!-- you dont need this extra div but it keeps structure neat -->
<ul>
<li>List content here which can be as complex as needed</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="footerFix">
<div class="footer">
<!-- The content in footer -->
</div>
</div>
...
The css
.headerFix, .header {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.headerFix, .footerFix {
position:relative;
}
.header {
position:fixed;
top:0;
left:0;
/*this is now fixed, but the parent being in flow keeps this div from overlapping your list which is why the height had to be the same for both*/
}
ul li {
/*basic list look for sample purposes*/
display:block;
min-height:40px;
border-bottom:solid 1px #777;
}
.footerFix, .footer {
height:50px; /*important to share width in both divs*/
width:100%;
background:red;
}
.footer {
position:fixed;
top:0;
left:0;
/*you will need to use javascript to find the height of device screen to know what the css value for "top" should really be. This will take some work on android where getting screen sizes is funky if you plan to support it. */
/*If its iphone only you can assume the size which has always been the same, and make an exception for the new iphone 6. I say use javascript to position this footer if you plan to support many platforms*/
}
By the way I recommend using this meta tag in your html head to make sure you use the screen at its best
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
When I use 'iscroll-lite.js' library in my mobile application, I fall same problem. Then I had little change in 'iscroll-lite.js' library.
Simply add e.preventDefault() to '_move:' function in 'iscroll-lite.js';
It resolve my problem.
My Simple HTML Structure:
<html>
<body>
<p id="5">
My Text Qoted Here -
<span class="author">Author </span>
<br>
<span class="uptext">20</span>
<img class="im" class="upimg"
src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />
<img class="im" class="downimg"
src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg" />
<span class="downtext">5</span>
</p>
</body>
</html>
as can be seen there are two images, and i want to change the count of the image based on which image is clicked.
i write the following jquery code for it:
$(function() {
$(".upimg").click(function(e) {
e.preventDefault();
alert("here1");
curr_val = $(this).closest(".uptext").text();
nos = parseInt(curr_val, 10) + 1;
$(this).closest(".uptext").text(nos);
});
$(".downimg").click(function(e) {
e.preventDefault();
alert("here2");
curr_val = $(this).closest(".downtext").text();
nos = parseInt(curr_val, 10) + 1;
$(this).closest(".downtext").text(nos);
});
});
But it does not seem to respond.
You can find the fiddle here
Your <img> tags have two class attributes:
<img class="im" class="upimg"
Try changing that to
<img class="im upimg"
Also, the closest() method returns the closest parent element, not an adjacent sibling, so to find the correct uptext element, you need to use:
$(this).prev().text()
you cant use 2 class attribute
you have to do like that
<img class="im upimg"
src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />
So I have some html code and it's basically a page with students basic info. Would someone help me or show me how to insert CSV data into the html, so that I don't have to do it manually.. Thanks. Here is a sample code. So, "Student1" , "li.picture1", student1.png, "Student 1" and most importantly the " X sample1" "X sample2" and "Y sample1" "Y Sample2" would be autofilled with csv data..
<div id="Student1">
<div class="toolbar">
<h1>[title]</h1>
Back </div>
<head>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
}
</script>
<!-- for profile image -->
<style type="text/css" media="screen">
li.picture1 { background: #fff url(images/student1.png) no-repeat !important; }
</style>
<!-- end line customization -->
</head>
<ul class="profile">
<li class="picture1"></li>
<li class="clearfix"><h2>Student 1</h2></li>
</ul>
<ul class="field">
<li class="sep" align="center">Day 1</li>
<li><h3>X Sample1</h3> <p>Y Sample1</a></li>
<li class="sep" align="center">Day 2</li>
<li><h3>X Sample2</h3> <p>Y Sample2</a></li>
</ul>
</div>
Im afraid you will most likely have to do that manually unless you copy it all into excel and delete everything but the key data fields
I can think of two ways to do this. One is to write a program in your favourite programming language which reads the CSV file and combines it with the HTML. Like this: (not real code)
read CSV into $student,$picture...
output to file '<div id="' . $student . '"><div class="toolbar">' etc.
Or open the CSV in excel and put a formula at the end of the line like this
="<div id=""" & a1 & "><div class=""toolbar""> etc.".... & b1 & ....
Note the doubled up quotes inside the strings.