I parsed an entire HTML page into an ASTNode.
Snippet of it looks like this:
<div id="buildings-wrapper">
<div id="building-info">
<h2><span class="field-content">Britney Spears' House</span></h2>
<div class="building-field">
<div class="field-content">9999 Hollywood Blvd</div>
</div>
<div class="building-field">
<div class="field-content">Building Hours: Mon. 07:00-23:00 Tue.-Fri. 06:30-22:00, Sat. 07:30-18:00, Sun. 12:00-18:00 Holidays - Closed</div>
</div>
<div class="building-field">
<div class="field-content">Locate on the stars map</div>
</div>
</div>
<div id="building-image">
<div class="field-content"><img src="../../../../ssc.adm.britneyspears.com/classroomservices/image/viewimage?userEvent=ShowBuildingImage&buildingID=britneyspears" alt="Image of BritneySpears"></div>
</div>
</div>
I need to grab some information from the page, like the name of the building and its address. How do I do that with an ASTNode? I've read the XML DOM tutorials and they suggest using document.getElementbyId and the ilk but I can't get to those functions from an ASTNode. I think I'm missing something simple but what's the easiest way to access the values I need?
Related
I am creating a blog which allows users to leave comments and I also want users to reply to those comments. Which means a reply form will need to be generated dynamically and will also need to contain the blog ID so I can write back to the database which comment is associated with.
My list of comments are as follows:
<div class="CommentContainer ClearFix" id="CommentID_1">
<div class="AuthorImage">
<img src="/images/uploaded/images/Users/ProfilePicture/Jamie%20Norman.jpg" alt="Jamie Norman">
</div>
<div class="CommentDisplay ClearFix">
<div class="AuthorInformation"><span>Jamie Norman</span> | 9 days ago</div>
<div class="Comment">Great read, really enjoyed</div>
</div>
<div class="ControlButtons">
Reply | Delete
</div>
</div>
<div class="CommentContainer SubCommentContainer ClearFix" id="CommentID_5">
<div class="AuthorImage SubAuthorImage ClearFix">
<img src="/images/uploaded/images/Users/ProfilePicture/Edward%20Tucker.jpg" alt="Edward Tucker">
</div>
<div class="CommentDisplay SubCommentDisplay ClearFix">
<div class="AuthorInformation"><span>Edward Tucker</span> | 9 days ago - 5</div>
<div class="Comment">Agree with what have said here</div>
</div>
<div class="ControlButtons">
Reply | Delete
</div>
</div>
<div class="CommentContainer SubCommentContainer ClearFix" id="CommentID_6">
<div class="AuthorImage SubAuthorImage ClearFix">
<img src="/images/uploaded/images/Users/ProfilePicture/Jamie%20Norman.jpg" alt="Jamie Norman">
</div>
<div class="CommentDisplay SubCommentDisplay ClearFix">
<div class="AuthorInformation"><span>Jamie Norman</span> | 9 days ago - 6</div>
<div class="Comment">Thanks</div>
</div>
<div class="ControlButtons">
Reply | Delete
</div>
</div>
<div class="CommentContainer ClearFix" id="CommentID_2">
<div class="AuthorImage">
<img src="/images/uploaded/images/Users/ProfilePicture/Millie%20Mitchell.jpg" alt="Millie Mitchell">
</div>
<div class="CommentDisplay ClearFix">
<div class="AuthorInformation"><span>Millie Mitchell</span> | 9 days ago</div>
<div class="Comment">If only we could all work from home</div>
</div>
<div class="ControlButtons">
Reply | Delete
</div>
</div>
Each div block has an id with CommentID_ and the ID of that comment.
What I need is for a div to append after the div in question is closed to show a reply text box and input containing the ID from the parent container. Effectively the ID of the comment being replied to.
In terms of the jQuery I have so far got the following:
$(".CommentReply").click(function(e) {
e.preventDefault();
var CommentID = $(this).attr('id');
$('<div class="CommentContainer SubCommentContainer ClearFix"><div class="AuthorImage SubAuthorImage ClearFix"><img src="/images/uploaded/images/Users/ProfilePicture/Jamie%20Norman.jpg" alt="Jamie Norman"></div><div class="CommentDisplay SubCommentDisplay ClearFix"><form name="InputDataForm" method="post" action="/blog/add-comment"><input type="text" name="BlogID_field" id="BlogID_field" vlaue="27"/><textarea name="AuthorComments_field" id="AuthorComments_field">Join the discussion...</textarea></form></div></div>').insertAfter("#CommentID_"+CommentID);
});
Which kind of works, but can not get the ID to appear in the input and think it is rather clunky...
I want it to work like the following, if you browse to the comments and click reply it creates a reply form, clock again and it removes it.
https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/
JSFiddle Link:
https://jsfiddle.net/MarcellusWallis/2at65p3j/
I am trying to write a script in tampermonkey that prints/inserts a value calculating the $ per sq ft. (Price/Total Sq Ft.) of each listing in a list like this. I have no javascript experience:
Screen Shot Example
Webpage:
http://www.utahrealestate.com/search/map.search
Relevant portion of HTML (one of the listings:)
<div id="mls-inline-1420899" class="listing_container">
<div class="listing-wrapper-table">
<div class="listing-wrapper-row">
<div class="listing-container-desktop">
<div class="listing-wrapper-cell">
<img src="http://assets.utahrealestate.com/photos/280x210/1420899_6faef96a263f4613b6b300cc915a9767_710733.jpg" class="listing-img" alt="MLS #1420899 Photo">
</div>
<div class="listing-wrapper-cell aligned-top">
<div class="inline_info">
<p class="status">
<i class="icon icon-circle status-1"></i> Active </p>
<h3>$249,000</h3>
<div class="list-info-content">
135 S 300 E <br>
Provo, UT 84606 </div>
<div class="list-info-content">
5 bds •
2.00 ba •
2026 sqft<br>
Built: 1914 • MLS #: 1420899 </div>
<p class="inline_agent">Agent: Chase Leavitt</p>
<p class="inline_brokerage">RE/MAX Equity</p>
</div>
</div>
</div>
<div class="listing-container-handheld">
<img id="img_1420899" class="listing-img" src="http://assets.utahrealestate.com/photos/640x480/1420899_6faef96a263f4613b6b300cc915a9767_710733.jpg" alt="MLS #1420899 Photo">
<div class="listings-info" style="display: block;">
<div class="listings-info-left-col">
<span>$249,000</span>
<p class="listing-address">135 S 300 E</p>
<p class="listing-address-csz">Provo, UT 84606</p>
</div>
<div class="listings-info-right-col">
<div class="border"><span>5</span><br>Beds</div>
<div class="border"><span>2.00</span><br>Baths</div>
<div class="end"><span>2026</span><br>Sq.Ft.</div>
<p>#1420899</p>
</div>
<p class="inline_brokerage">RE/MAX Equity</p>
</div>
</div>
</div>
</div>
</div>
I wrote a list of things that I need to accomplish to make this happen:
Javascript to grab the value of each listing and put it in a
variable
Javascript to grab the sq footage of each listing while excluding the uneeded info in the same div
Javascript to divide those variables and store result in a $perSqFt variable
Javascript to output that new value along with the original data
Loop for all of the listings doing the same as above.
Here is what I have so far. Feel free to offer any pointers, links, or advice. I am just updating this as I go. Thank you for helping!
(#1) The value for each listing is within a h3 tag. I am thinking that I will need to use find to get the value of the h3 tag:
.find('h3')
(#4) I am thinking I can use appendChild to output the new value next to the original sq ft value. Still working on this:
document.getElementById('list-info-content').appendChild(dollarPerSqFt);
(#5) The beginnings of a loop through .list-info-content classes:
var find_class = document.getElementsByClassName('list-info-content');
for (var i = 0, i++) {
find_class[i].innerHTML = {do something to} find_class[i].innerHTML ;
}
I get problem when using cycle plugin, I get last image when load
you can see the web link here - http://www.visitclearwaterflorida.com/index.php/
and this is what I see when first load/refresh - http://www.elixirbox.com/temp/header1.jpg
Is there anyone know what the problem ?
this is my code :
<div id="headerimgs">
<div class="headerimg bg1">
<div class="container_16">
<div class="grid_16"><div class="caption">Sunsets at Pier 60, Clearwater Beach</div></div>
</div>
</div>
<div class="headerimg bg2">
<div class="container_16">
<div class="grid_16"><div class="caption">'Winter' the Dolphin invites you to visit the Clearwater Marine Aquarium!</div></div>
</div>
</div>
<div class="headerimg bg3">
<div class="container_16">
<div class="grid_16"><div class="caption">Clearwater Beach </div></div>
</div>
</div>
<div class="headerimg bg4">
<div class="container_16">
<div class="grid_16"><div class="caption">Sunset at Pier 60, Clearwater Beach</div></div>
</div>
</div>
<div class="headerimg bg5">
<div class="container_16">
<div class="grid_16"><div class="caption">Clearwater Beach Walk</div></div>
</div>
</div>
</div>
I call image background from CSS class "bg1, bg2.. bg5"
Thanks
I suggest that you change your CSS to be something like this:
#headerimgs>div:first-child {display:block}
#headerimgs>div {display:none}
Or consequently if you are generating this with php you can have all of the imgs after the first with style="display:none"
Here is a link to the FAQ page describing the technique. http://jquery.malsup.com/cycle/faq.html
Please check the order of images you can gave for banner image... From your code i have found your expected image has been in 5th position.. please check and order it correctly. it will be work... or please put your code of banner.. i will guide you
I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>
Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/
So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/
I have this HTML code:
<div id="content">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="container" id="status-#">
<div class="message">
<span class="username">{username} Debugr Rocks!
</div>
<div class="info">24-oct-2010, 14:05 GMT · Comment (5) · Flag · Via Twitter
</div>
<div class="comment_container">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="comment_message">
<span class="username">{username}</span> Debugr Rocks! XD
</div>
<div class="comment_info">24-oct-2010</div>
</div>
</div>
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
That is repeated two or more times. What I want to do, is to when I click the "Comments (5)" link, the class "comment_container" appears, but only the one in the same "container" class.
It's this possible?
You can use .closest() to go up to the .container then .find() to look inside it, like this:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here, if you're curious about finding other things relative to this here's a full list of the Tree Traversal functions.
As an aside, there's an error in your HTML that needs correcting, this:
<span class="username">{username} Debugr Rocks! </div>
Should be:
<span class="username">{username} Debugr Rocks! </span>