JQuery :: Manipulating DOM With HTML?
Feb 21, 2011
I've been looking for information on how to insert content from one HTML page into another HTML page. Is it possible to do this with just HTML and JQuery? My idea was to use one index page and call in content from other pages to be inserted in the content section of the index page. The biggest issue I'm having right now is figuring out how to grab the content from the outside html page. I tried looking at ajax examples of importing content and just putting .html file instead, but it didn't work.
View 8 Replies
ADVERTISEMENT
Nov 22, 2011
I need to get a some blocks of html that are contained in elements in a JSON object, remove some images and then add the updated blocks into cells in new table rows
in the JSON Object each html block is called 'htmlblock' within the html string, each img element that has to go has a class of 'imgThumb'
So far I'm here:
I get the data with $.getJSON - OK I work through the JSON object with $.each - OK I convert the text string of html to a DOM object with $.eventData=$(this.htmlblock) - OK I get rid of the images with $.eventData.remove('.imgThumb') - OK
After that I start running into problems
I have a bunch of elements from the JSON object that I have to add to the table as well - so the simplified version looks something like (#delTableBody is the tbody element that I'm adding to):
$.getJSON(eventURL, function(event){
$.each(event, function(){
$.eventData = $(this.htmlblock);
$.eventData.remove('.imgThumb');
[Code]....
View 2 Replies
View Related
Jul 16, 2010
I came across a very odd browser behavior when trying to modify a css class using javascript and at the same time having a base html statement in my html file.Without the base html statement, all browsers work fine and I can change the css class definition using javascript easily.With a base html statement, only FireFox still works while Internet Explorer and Google Chrome dont work anymore. If there is a cross-domain issue, while one browser does work and the others dont? An example of what I'm talking about, with the base statement:
http://freebsdcluster.org/~casaschi/tmp/example-base.html
Without the base statement:
http://freebsdcluster.org/~casaschi/tmp/example-nobase.html
how to tweak the code in the case with the base html statement in order for the javascript to work with all browser (modifying the class definition) ?I want to be able to manipulare css classes with javascript when a base html statement is in my html code.This is essentially the code:
<!--
-->
<base href='http://www.google.com'>
<style id='myStyle' type='text/css'>[code]....
View 10 Replies
View Related
Oct 9, 2011
I am having troubles manipulating DOM elements inside a variable. I have the following code:
var
$content =
pages[pageId].page;
$('.widget_inline'
[Code]....
Inside this html string there are multiple id's that I have to change. The .each finds the rightelements and the manipulation seems to work when I do a console.log onwidgetElement.However the actual $content remains unchanged. I probably made a very obvious mistake but I can't find it.
View 1 Replies
View Related
Sep 15, 2009
I have multiple <tr> tags following the below pattern:
<tr>
<td class=c1Top>
<table>
<tbody>
[code]....
I need to update the href attribute so it appends the html value to the href attribute e.g.
href="http://mysite/Page1.html"
href="http://mysite/Page2.html"
href="http://mysite/Page3.html"
I tried the following, but no luck. It updates the html value of all anchor tags with the value contained in the 1st tr $('td.c1Top table tbody tr td.ms-vb a').attr('href', $('td.c1Link table tbody tr td.ms-vb a').html());
View 1 Replies
View Related
Jul 9, 2009
I'm new to JQuery and would usually do more research before posting, but I have a demanding client that wants results, I have a dynamic CSS/JQuery menu that is part of a WordPress theme, and I would like to be able to set the menu to automatically size itself to the longest menu item or sub-menu item. The menu in question is at: [URL].. under Solutions.
[Code]...
Lets say for simplicity's sake that I will make the first menu option the longest, and the rest of the menu width will be based on that width. How would I do that? Would this even work on the fly? I already have an easy CSS solution but it involves changing the width property every time the longest item changes.
View 1 Replies
View Related
May 24, 2009
manipulate content between elements. I've found a script where I can find the content between elements, but now I've got the weirdest thing ever: i can't find a way to manipulate it. I know its very simple but I tried everything and nothing works!
What i want is to wrap a <div> around it.
Current script:
var headings = $('h3');
for(var i=0; i < headings.length; i++) {
var node = headings[i];
var group = [node];
[Code]....
So, instead of an alert() i want to wrap it with a div. However, I'll get an js error if i do that.
My link is: [URL]
View 3 Replies
View Related
Jun 27, 2010
I'm using the divSlideShow plug-in on my site; however, I want to be able to call a given "slide" within the slideshow via a button located outside the slideshow container. So instead of manipulating the slideshow via the automatically set left and right arrows, or numbers, I want to use my own buttons.
View 1 Replies
View Related
Sep 11, 2010
Is it possible to manipulate with elements in a variable, instead of in the document? I have a situation where I'm getting some HTML code in an Ajax response, but I want to make changes to it before I put it in the document. So I would need to iterate through some elements and change their attributes while the HTML code is still in the variable and then write it to the document.
View 5 Replies
View Related
Oct 14, 2010
I need some help in jQuery code I am working on. I have an asp.net grid view that I can’t manipulate in the server so I need to do it on client side. The gridview has a file name in the first column. All the files I deal with are in a known single folder on the server
I set a blank column at the end of each row and I want to:
1. Take the file name from the first TD (appears as simple text) and change the file extension (from doc to flv)
2. Check if the file exist in the server
3. If exist, put it in the last (blank) TD after changing the file extension (from doc to flv)
4. If exist Wrap it with <A href=”filename.flv”>filename.flv</a> and make it clickable for the user to download
Here is where I need the help: First problem: I manage taking the file name from the first TD and put it in the last one (see code below) but the text appears as regular text and the link is not active
The Gridview ID is "SearchResultsGV"
1. jQuery(function() {
2. jQuery(".SearchResultsGV > tbody > tr:not(:has(table, th))")
3. .css("cursor", "pointer")
4. .click(function(e) {
[Code]...
View 3 Replies
View Related
Apr 15, 2011
I am missing something here but this is what I want to do. I want to select a checkbox as such
$('chkRequired');
Easy enough. But I want to then use $(this).attr('checked','true'); and then $(this).show(); and then $(this).next().show();
How can I formulate that into something like:
[Code].....
View 3 Replies
View Related
Jan 1, 2005
I created a script which loads my xml file and it also saves my xml file to a persons HD using an ActiveX plugin.
Now what I would like to do is have my script take the loaded XML file and add/remove childelements and then save it. But I want this to be done in memory that way the user doesnt have to see it. Code:
View 6 Replies
View Related
Oct 5, 2009
i want to display a downlod counter shown in another webpage in a 3rd paty site.now first i grab the page source using the below code.thats was success full.
Code:
<?php
$ch = curl_init();
[code]....
View 1 Replies
View Related
Oct 4, 2005
I'm trying to modify a form so that when a user clicks a checkbox for a
shorter version of the form, it will replace swap the default (long)
form elements with the short version of elements, so that only the
version that is selected will have its element values passed on to the
next page. Code:
View 2 Replies
View Related
Dec 18, 2005
I'm working on setting up a "Send this link to a Friend" page. The
page has a couple of inputs and a textarea. I have some default text
in the textarea that is populated at the time of page load. What I
would like to do is replace the "Dear Friend" in the textarea with the
name of the friend once it is entered in the input. Code:
View 4 Replies
View Related
Dec 6, 2006
UI Event library it is possible to poll the DOM as the
page loads for the appearance of a particular element. When that
element is found a callback function executes. In Flanagan's book he
warns that some JavaScript experts say this is bad practice because it
is not standardized. I've tried the YUI technique only a little and
like the idea for some pages to make certain parts interactive before
all pictures etc have been loaded. Does anyone here have info about
when this technique fails?
View 1 Replies
View Related
Jul 20, 2005
Supose I have 2 lists on a form, L! and L2. L1 is populated with data L2 is empty.
I want to select some options from L1 and transfer to L2. How can I do that? Is there a function from List object that helps to add dynamically....
View 1 Replies
View Related
Sep 11, 2002
I'm designing a web site and I designed an error page with .htaccess so that when someone types in an incorrect URL, it takes them to my customized page. Well, I used server-side programming to make it log the bad URL and check against a database if the there is a good URL matching the bad one. If so, it redirects to that page instead of giving the error. It's a good, well-written script done by me, I'll give it to anyone that requests it.
What I want to know is if JavaScript can prevent a page from being logged in the visitor's browser history.
You see, when they click the back button, the revisit the error page and it relogs the bad URL.
Is this possible in Javascript? Code:
View 4 Replies
View Related
Aug 8, 2000
I'm attempting to make a div hidden upon an image click, and it's not working.
Here's the code:
<script language="JavaScript" type="text/javascript">
function ToggleDisplay(id)
{
// alert(id);
var elem = document.getElementById(id);
if (elem)
{
if (elem.style.display != 'block')
{
elem.style.display = 'block'
elem.style.visibility = 'visible'
}
else
{
elem.style.display = 'none'
elem.style.visibility = 'hidden'
}
}
}
</script>
<style type="text/css">
.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;
background-color:#cccccc; font-family: Verdana; }
.details { display:none; visibility:hidden; background-color:#eeeeee;
font-family: Verdana; }
</style>
Here's the div:
<div id='div<%# DataBinder.Eval(Container.DataItem,"City").ToString() %>' class="details">
Any ideas on why this isn't working?I've tested in the JS code to make sure it was getting the right ID so that part is set.
View 7 Replies
View Related
Apr 20, 2010
I know I need to appendChild node somewhere but i can not figure out where to. So far i have appendChild at the table head which works to an extent. How can I make it so the new row is added above the table header but in it's own formatted little cell. Also how would you insert the row below the header but at the top of the other rows?
I have managed to move the inserted row to the top above the header but it doesn't look terribly good.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[Code].....
To allow for backward compatibility with the older Simple Table Model, if no TBODY structures exist in a table, the entire set of row groupings [TR] are assumed to be a single TBODY.
</body>
</html>
View 2 Replies
View Related
Apr 14, 2010
Is the hiding/showing of text fields done differently than for buttons? I ask because I have the following text field:
Code: <input type="text" name="case_id_c" class="sqsEnabled" tabindex="0" id="case_id_c" size="" value="" > And if I call the following javascript, this field disappears:
Code: document.getElementById('case_id_c').style.display = 'none';
[Code]...
View 1 Replies
View Related
Dec 15, 2011
I have a fairly conventional page split into basically 2 divs one at the top of the viewport and the other at the bottom. The top div represents the header and the bottom div represents the content.
I have a problem in that the content loads in dynamically and when you scroll the content on a page and then click a link to navigate to another page the new content loads partially scrolled, and I need the scrollbar to always start at the top of the page so that the content also does.
I have tried HTML anchors, .scrollTop, .animate with no success. Does anyone have an idea on any jQuery or JavaScript code that will force the content to load without being partially scrolled and/or force the scrollbar to the top of the page?
View 1 Replies
View Related
Apr 14, 2010
Is the hiding/showing of text fields done differently than for buttons? I ask because I have the following text field:
<input type="text" name="case_id_c" class="sqsEnabled" tabindex="0" id="case_id_c" size="" value="" >
And if I call the following javascript, this field disappears:
document.getElementById('case_id_c').style.display = 'none';
However, I have the following button:
<input type="button" name="btn_clr_case_id_c" tabindex="0" title="Clear [Alt+C]" accessKey="C" class="button" onclick="this.form.case_id_c.value = ''; value="Clear">
And if I run the following code, nothing happens:
document.getElementsByName("btn_clr_case_id_c").style.display = 'none';
View 4 Replies
View Related
Sep 30, 2010
I have a text box.I need to
1) search the database for the words user is typing in the text box. This will happen with each key press.
2) if there is a match - I need to change the text color.
How can I achieve this?
View 2 Replies
View Related
Nov 21, 2005
I want to have a single window with 6 or so links at the top that display fixed pages for the first 4 and the final two "Brow" and "se-H" or "se-S". When you double click "Brow" a script prompt asks to enter where they want to go. The script then adds http:// to the front of it and places it as the src for an iframe in a <div></div> layer that has its visibility as hidden. "se-H"/"se-S" Hide and show the layer wich has a zindex higher than that of all other layers on the screen. The other links that just have the code strung out in the onClick action are working just fine as does the Brow link the only resultant error is the "se-H"/"se-S" links they change back and forth indicating the script is running and the outerHTML code is ok but the zindex just isn't changing nor the visibility. I am asking for any suggestions and if I have not included all necessary code please tell me as I only took the pieces I thought may be causing the trouble:
<SCRIPT>
function show()
/*show*/{
fun2.style.visibility='visible'
/*show*/}
function hide()
/*hide*/{
fun2.style.visibility='hidden'
/*hide*/}
var go_to=""
function disp_pop()
/*disp_pop */{
go_to = prompt("Where do you want to go? ","")
/*disp_pop */}
function get_there()
/*get_there */{
if(go_to !="" && go_to!=null)
fun2.outerHTML='<div id=fun2 style="position:absolute; top:55; left:10; z-index:15; overflow:scroll;"><iframe src="http://'+go_to+'" width=475 height=395></iframe></div>'
else
fun2.outerHTML='<div id=fun2 style="position:absolute; top:55; left:10; z-index:15; overflow:scroll;"><iframe src="http://google.com" width=475 height=395></iframe></div>'
fun2.style.visibility='visible'
/*Everyone else back*/
guide.style.zIndex=2;
autoguide.style.zIndex=0;
webmail.style.zIndex=1;
/*Everyone else back*/
/*get there */}
var swap_1 ='<a id=myH4 onclick="this.outerHTML=swap_2;hide();">wse-H</a>'
var swap_2 ='<a id=myH4 onclick="this.outerHTML=swap_1;show();">wse-S</a>'
</script>
The links I am using in the page are as follows
<a href="#" onclick="guide.style.zIndex=2; autoguide.style.zIndex=2; webmail.style.zIndex=3;">Mail</a>
<a href="#" onclick="guide.style.zIndex=1; autoguide.style.zIndex=3; webmail.style.zIndex=2;">TxGuide</A>
<a href="#" onclick="guide.style.zIndex=3; autoguide.style.zIndex=1; webmail.style.zIndex=2;">Guidelines</A>
<A HREF="#" onmouseover="reappear()" onmouseout="disappear()">AuxDetail</A>
<A HREF="#" ondblclick="tada()" onclick="hideit()">Fun</A>
<a onClick='toggleAddress("")'>Refresh</a>
<a id=myH3 ondblclick="disp_pop()" onclick="get_there()">Bro</a>
<a id=myH4 onclick="this.outerHTML=swap_1;show();">wse-S</a>
View 6 Replies
View Related
Dec 20, 2006
I have the following function to resize a div element (Content) depending on the:
size of another div element (leftConent).
function adjustContentHeight() {
var content = document.getElementById("Content");
var leftOne = document.getElementById("leftContent ");
content.style.height = (leftOne.offsetHeight + leftOne.offsetTop) + "px";
return true;
}
This code works as expected in IE6 and FF2.0, but when testing in IE7
nothing happens... the "Content" div is not resized.
View 2 Replies
View Related
