|
JavaScript - Jquery .append To A Href
Hi Chaps,
I have thumbnail gallery which, when clicked opens up a large version in a div. PHP Code: <p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></p> <p class="thumbs"> <a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a> <a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a> </p> The jQuery Code: Code: $(document).ready(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
});
});
With a bit of CSS, this is working fine. What I'm trying to do is to: 1. Add attribute to: PHP Code: <p class="thumbs"> <a href="images/img2-lg.jpg" zoom="images/img2-zoom.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a> <a href="images/img3-lg.jpg" zoom="images/img3-zoom.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a> </p> 2. Add <a id="img_zoom"> to: PHP Code: <p><a id="img_zoom"><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></a></p> 3. Add to the jQuery code, to append the "<a>" link, something like: Code: $(document).ready(function(){
$("img_zoom").append('" href="')
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
var zoomPath = $(this).attr("zoom");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("img_zoom").html(zoomPath+" " "); return false;
});
});
So when the thumbnail image is clicked, the resulting jQuery output would be something like this: Quote: <a id="img_zoom" href="images/img3-zoom.jpg"> Is this do-able? I've played around with it for ages and can't get it to work. Any hlep would be awesome! Similar TutorialsI am trying to make a lightbox type plugin and I am running into a problem. I hope it is something simple that I am overlooking. Here is my code: jQuery.fn.overlay = function() { $(this).click(function() { $('body').append('<div id="over"></div>'); $('#over').fadeIn(); }); }; It (almost) does what it should. It draws the #over div to the screen just fine. The problem is when I try to access it. I try something like this and get no response: $(function() { $('#over').click(function() { alert('moo'); }); }); Its like the element is not getting the ID assigned to it. Does anyone have any ideas? Thanks in advance. I did something like this: Quote: $('#test').append("<option id='ddm'>added dropdown</option>"); it shows its html in the browser but I can't see it when I view source, is this normal? Thanks. Hi, I'm using the following Javascript code to show a div layer depending on the URL Code: <script type="text/javascript">
if (location.href.match(/folder/)) {
document.getElementById("div-layer").style.display="block";
}
</script>
This works perfectly when I visit http://www.domain.com/folder but I do not want it to match any subfolders beneath /folder, for example: http://www.domain.com/folder/sub-folder http://www.domain.com/folder/sub-folder2 etc. Does anyone know how I can modify the code to only match /folder or /folder/ and no subfolders beneath it? Thank you in advance. Hi to all, Sorry to ak this question it may be easy but i didn't got the solution on net please provide the proper answer. My question is : I am defining hyperlink in struts as <a href= Javascript:formSubmit(<bean:write name="AA" property="aa">','<bean:write name="BB" property="bb">) defining function as function formSubmit(Aa,Bb) { document.forms[0].action="/accesingpage.do?method=create&AA=+Aa" ----> in above statement how to pass the second parameter(i.e Bb)....I tried different ways but giving syntax error. please post the ans as soon as possible edit: I further identified the problem. Hi, I'm new to JavaScript and I'm having problem with appending a div node returned from a function. Here's where it crashed: Code: var div=document.getElementById("dashboard_secondary_cat_list");
var s=get_secondary_cat_node(attributes);
alert("b4 appendin:"+s);
div.appendChild(s);
alert("done appendin");
alert("done appendin"); never gets called because the previous line crashes. alert("b4 appendin:"+s); shows: b4 appendin:[object HTMLDivElement] I want to append a string "&sid=xyz" to the current page URL if the referring URL comes from site www.xyz.com. I have the following code - var query = location.search.substring(1); if (document.referrer.indexOf(/xyz/) > 0) { query = query + "&sid=xyz"; } However, the string is not being appended. Can anyone see where the problem lies? I have the following code in a website which is the W3C method of loading XML/XSL via Javascript. The code works perfectly except as you can see from the last line of code it appends the fixed div. This is not suitable as I need the site to overwrite the contents of the fixed div (not append). How could I rewrite that last line of code so that the data within the fixed div is rewritten with the contents of resultDocument. innerHTML doesn't work since the content of resultDocument is an XML file. Code: xml=loadXMLDoc("dating_database.xml");
{
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById("fixed").appendChild(resultDocument);
}
Hi I am new to javascript programming. Is it possible to append an event handler to a tag dynamically. <input type="button" id="cmdNext" value="Next Page"> i want to be able to programatically loop through the buttons on a page and then add the onClick event. So my finally result will be the following: <input type="button" id="cmdNext" value="Next Page" onClick="CheckValues()"> Since i am new (if possible) can someone provide detail code example so i can break it down and study it before i implement. I have following JS snippet var t = document.createElement ('div'); t.id = "testDiv"; t.innerHTML = "test content"; window.top.document.getElementById ('anotherDiv').appendchild (t); 'anotherDiv' exists in the document; The statement above is not working in IE I'm seeing JS error. but it works in Firefox (i.e t element is appended to anotherDiv). Can any one please let me know how i can resolve this. hello, I'm trying to build a simple function to append and replace an argument in a query string, for example, if my url was like; www.domain.com/page.php?test=123&blah=abc and I want to add on qty=5 like; www.domain.com/page.php?test=123&blah=abc&qty=5 ok, no problem there, however if I now want to update that to qty=6, i get this: http://www.domain.com/page.php?test=...bc&qty=5&qty=6 my code thus far; Code: function AppendURL(){
var AURL = document.getElementById('AddToCartLink');
var numQty = document.getElementById('Qty').value;
var TempURL = AURL.href;
AURL.href = TempURL + '&Qty=' + numQty;
}
So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
I have a form with an action url, but I need to alter it on submit. What I need to do is take the value of the text field, escape it, and append it on the end of the action url. Something like this: action url: /search/node appended action url: /search/node/some_escaped_string To do this, I create the function ahead of time and change the submit to a button with onClick. What isn't working is the escape mechanism. If I were to test for "ttt hhh", I'll get "/search/node/ttt hhh", instead of "/search/node/ttt%20hhh" Code: <script type="text/javascript">
function urlAppend()
{
termsValue = document.getElementById('terms').value;
escapedVar = escape(termsValue);
appendedUrl = "/search/node/" + escapedVar;
location.href = appendedUrl;
}
</script>
<form method="get" action="/search/node">
<input type="text" name="terms" id="terms"></input>
<input type="button" value="Search" onClick="urlAppend();">
</form>
Can someone tell me what I'm doing wrong? hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... I am attempting to manipulate a long text string with javascript. This text string may have one or more occurrences of a string which starts with a particular string and ends with another string. So, for example, text that starts with 'nam' and ends with 'sit' in this example: Quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit nam aliquam leo sit amet nibh tincidunt ultricies. Nullam nam feugiat velit sit amet dui scelerisque id ornare nulla ultricies. I want to prepend another string before the nam and append another after the sitt, to give me: Quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit before nam aliquam leo sit after amet nibh tincidunt ultricies. Nullam before nam feugiat velit sit after amet dui scelerisque id ornare nulla ultricies. I think the way to do this is via RegExp, but I'm insufficiently familiar with this to know how to write the expression. Can anyone help me out? I have a page with multiple drop down menus for selecting a State then City, then Zip. The State and City both work fine but I can't seem to make the Zip function properly. Page with drop downs: Code: var xmlhttp;
function showCity(state)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="get_cities.php";
url=url+"?q="+state;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
var s=state;
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
var xmlhttp;
function showZip(city)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="get_zips.php";
url=url+"?z="+city;
url=url+"&q="+s;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged1()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtZip").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
<!--**********
state drop down
*********-->
<? $State = mysql_query("SELECT DISTINCT full_state FROM zip_codes ORDER by full_state",$db_link); ?>
<select name="state" CLASS="formTextbox" size="1" onChange="showCity(this.value)">
<? while($get = mysql_fetch_array($State)) { ?>
<option value="<?=$get['full_state'];?>"><?=$get['full_state'];?></option><? } ?>
</select>
get_cities.php: Code: <?php
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $City = mysql_query("SELECT DISTINCT city FROM zip_codes WHERE full_state = '$q' ORDER BY city",$db_link); ?>
<select name="city" CLASS="formTextbox" size="1" onChange="showZip(this.value)">
<? while($get = mysql_fetch_array($City)) { ?>
<option value="<?=$get['city'];?>"><?=$get['city'];?></option><? } ?>
</select>
get_zips.php: Code: <?php
$z=$_GET["z"];
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $Zip = mysql_query("SELECT DISTINCT zip FROM zip_codes WHERE city = '$z' AND full_state = '$q' ORDER by zip",$db_link); ?>
<select name="zip" CLASS="formTextbox" size="1">
<? while($get = mysql_fetch_array($Zip)) { ?>
<option value="<?=$get['zip'];?>"><?=$get['zip'];?></option><? } ?>
</select>
I have my page set to only show the drop down's when there is a value to select. The Zip drop down shows up at the correct time but is empty. I've tried searching the forum but since I'm still learning js I wasn't able to make use of any on the other multiple drop down examples I came accross. Thanks for any advice you can offer. I'd like to create a basic form where 3 text input fields are named with the following names referrerId, referrerId2 & referrerId3. My goal is once the text fields within the form are populated with the users data, then once the user clicks submit, a new browser window opens up (in parent window preferably), navigating to the following url exactly as shown. Highlighted in red is the dynamic information I'd like appended. Vacation Packages &referrerId=FIRSTNAME&referrerId2=LASTNAME&referrerId3=AGENTNUMBER Any help would be greatly appreciated. Thanks! The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question. The problem is, when I keep issuing the request it keeps appending over and over again Code: if (oSession.uriContains("search?q="))
{
var str = oSession.fullUrl;
var sAppend = "+test1+test2+test3";
if (!oSession.uriContains(sAppend))
{
oSession.fullUrl = str.replace( "search?q=","search?q="+sAppend);
}
}
Can you please give me an example? I'm still new to programming. Thank you |
|||||||