|
JavaScript - Linking An Highlighting Text To A Page
hello i've followed this javascript and i'd like to link the text to one of my page.How do i place the ahref tag in the script.Appreciate your help http://www.javascriptkit.com/script/script2/neontext.shtml
Similar TutorialsAlright, I'm using a Rooh.It WordPress plugin right now, but I don't like the way they do it, so I want to write my own code to do something similar. I want the user to be able to select the text they want to highlight, and the background color of that text changes to whatever color they have selected. How can I do this in JavaScript? I'm trying to write a function that is similar to the ctrl+f functionality you get in IE, where you have a search string and when you click 'next' the whole string if matched is highlighted by the cursor. This works fine for inputs and text areas using the following code: Code: function setCaretPos(obj, start, end)
{
var range = obj.createTextRange();
range.moveStart('character', start);
range.moveEnd('character', end - obj.value.length);
range.select();
}
But now I need to get it to work for normal text in a text node that is in the HTML/DOM. Is there an equivalent way of making the above method work for text in text nodes? Alternatively is there a way to make the browser (IE) at least focus on some text in a text node? (I could then highlight it with CSS styles). HI all, I am new to this forum and really needs your help. Please let me know how can I highlight a selected portion of an html document with javascript such that the selected portion is repeatedly shown highlighted on each and every page refresh. Thanks & Regards, Sumantra Hey Basically all i want to do is highlight the pages hyperlink the user is currently on. So when the home page loads, the home page hyperlink is a different colour to the other hyperlinks, and then when another is page is pressed it is that pages hyperlink that is a different colour to the others Im currently working on a project for class and have been directed to use Javascript for what im looking to do. Im a beginner when it comes to coding w/ javascript. Over the last couple days I've spent good time reading and practicing tutorials but have yet to do something I imagine is very basic for what I want to do. At the moment, im looking to insert text into a webpage, that links to images. The images, ideally will layer on top of each other (Multiple images can be shown based on the "text" which activates it) Images shown, if done what im looking for, will have a transparent background to view images set behind one another. I've spent a couple hours looking up code through google, found similiar code which i've tried to manipulate to do what I want. I have yet to put something successful together. Was hoping I could look upon experience programmers to help me out by pointing me in the right direction. Im willing to do the work, just looking for that guidance i have been looking all over the web and i can't get to where i need to be to finish my page. basically i have two pages and if someone clicks a specific link from the first page i want it go to the other page but load a specific page in the iframe on the second page. i know how to use javascript to make a specific page load into an iframe but not how to make the page load into the iframe on another page. all i need to know is how to do it for one page then i think i can build the decision structure around it to make it work for more than one link (hopefully). any help will be greatly appreciated. thanks. I have a simple script that will get the NWS forecast for any zip code and it opens it in a new tab. I would like it to open in an iframe on another page with in my website. I have come close, but not quite all the way yet. This will enter the forecast in an iframe on the same page as the input form. http://www.cavecountryweather.com/wxsearch.php How can it load onto this page from the form on the menubar? This menu is common on all the sites pages. I have seen solutions posted around the internet using javascript for similar issues, but I haven't been able to get any to work in my situation. My javascript skills are - none. Any help would be appreciated. Hey, I have 3 bits of code, 2 of which I'm pretty sure are right [i know the php works, and the ajax looks fine], but one i'm having trouble with. Basically what I'm trying to do is use a link to call php function [calls a piece of text from a database]. Which worked fine. But then I tried to incorporate AJAX into the script to make change dynamically on the page, and I'm a little confused with it all. I've got the AJAX and PHP, [and an attempted page with a link on to try and call the function with AJAX] but so far it's not doing as it should. Wondered if anyone could show me where I'm going wrong with the whole 'linking together' thing? So far everything I've tried hasn't worked. [hope this doesn't violate the forums 'don't dump your code' rule. But it's kind of all necessary] The AJAX [AJAX.js]: Code: function loadurl(generate.php) {
var ajax = false;
// Create the object:
// Choose the objecttype, depending on what is supported:
if (window.XMLHttpRequest) {
// IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Old IE-browsers
// Make the type Msxml2.XMLHTTP, if possible:
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) { // Else use the other type:
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) { }
}
}
// Retrieving the data from the page
if (ajax) {
alert("url:generate.php" + url);
ajax.open('GET', url);
// Sends request
ajax.send(null);
// Function that handles response
ajax.onreadystatechange=function(){
// If everything is OK:
if ( (ajax.readyState == 4) && (ajax.status == 200) ) {
// Returns the value to the document
alert(ajax.responseText);
}
}
} else { // AJAX is not useable
alert('It is not possible to connect, please update your browser.');
}
}
The PHP [generate.php] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php
if($_GET['act'] == "generate_quotes") {
$db = mysql_connect("*", "*", "*") or die ("Unable to connect to database.");
mysql_select_db("quote") or die ("Unable to select database.");
$result = mysql_query( " SELECT * FROM `quote` ORDER BY RAND() LIMIT 0,1 " );
$fetch = mysql_fetch_array($result);
echo "<blockquote>".$fetch['q_quote']."</blockquote>";
mysql_close($db);
} else {
echo "<img src=\"1.png\">";
}
?>
</body>
</html>
The page where I'm trying to bring them together [PULL.php] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="ajax.js" type="text/javascript"></script>
</head>
<body>
<a onClick="loadurl('generate.php'); return false;">Click Here</a>
</body>
</html>
I've included the file names with extensions just in case it's something to do with those, but thanks in advance for any help. Greatly appreciated. I've searched everywhere for help on how to do this... I have a website for tanning salon services. Salon A's page has links for 4 possible equipment choices -[I] (diamond, platinum, gold, bronze levels) on the Sunbeds page. Sunbeds page has 2 iFrames, top and bottom, that are changed by 4 functions - changediamond(), changebronze(), etc. based on the selection. I need to be able to click a link on the Salon page that will take me to the corresponding function on the Sunbeds page... Here's what I have so far: Salon A page Code: <a href="sunbeds.htm?javascript:changediamond()"><img src="images/nr_diam_sm2.jpg" alt="Diamond Level Sunbeds" /></a>
(thru)
<a href="sunbeds.htm?javascript:changebronze()"><img src="images/nr_brnz_sm2.jpg" alt="Bronze Level Sunbeds" /></a>
Sunbeds page Code: <SCRIPT language="JavaScript">
function changediamond()
{
parent.FRAME1.location="sb_top_ct1.htm";
parent.FRAME2.location="sb_bot_ct1.htm";
}
(thru)
function changebronze()
{
parent.FRAME1.location="sb_top_ct4.htm";
parent.FRAME2.location="sb_bot_ct4.htm";
}
</script>
.
..
...
..
.
<a href="javascript:changediamond()"><img src="images/diamond_sm2.jpg" alt="Diamond Level Sunbeds" /></a>
(thru)
<a href="javascript:changebronze()"><img src="images/bronze_sm2.jpg" alt="Bronze Level Sunbeds" /></a>
The links take me to the correct page but not the function. Once I'm there I can select the functions and the iFrame change works great. I'm just at a loss for passing along the data string ie sunbeds.htm?javascript"changediamond() I would certainly appreciate any help and advice you could share. I'm sure it's pretty simple but for a JS newbie, it's frustrating! . . . .Within my website (so I control all pages) I often make anchor-links from one page (call it currentpage.htm) to an anchor-link in another page (newpage.htm). Imagine that newpage.htm has two anchor-locations, one near the page-beginning (#high) and one near the page-end (#low). . . . .There is a problem when linking to newpage.htm#low (or an inside-the-page link to #low) because the page-end goes to the bottom of the browser window, and the location (#low) appears somewhere in the vertical middle of the browser window, so it's difficult for a user to know where they should begin reading, and they get confused. . . . .A low-tech solution is to "make the page longer" by adding space to the page-bottom with a series of <p> </p>, or with a tall blank spacer-gif. But this implies something false, it tricks a user into thinking the page is longer than it is, so they may think "this page is too long, I don't want to read that much" and they go away, or they "skim" when they could read more slowly. . . . .Is there a solution using javascript? . . . .If yes, I assume the javascript must be located within newpage.htm, because a command within currentpage.htm can't "tell another page" what to do. Is this correct? I'm not confident because I'm a novice with using javascript. . . . .So is there a way to say, within newpage.htm, "make the page longer by adding a blank spacer-gif to the page-end when an incoming link goes to newpage.htm#low" but to have this be temporary, so when newpage.htm is opened the next time normally (with a link to newpage.htm or to newpage.htm#high) the spacer-gif is gone? CraigR Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. alright, if my TR looks like this... Code: <tr class="colorRow('0',' ');" onmouseover="colorRow('0', 'over');" onmouseout="colorRow('0', 'out');">
<tr class="colorRow('1',' ');" onmouseover="colorRow('1', 'over');" onmouseout="colorRow('1', 'out');">
<tr class="colorRow(' ',' ');" onmouseover="colorRow(' ', 'over');" onmouseout="colorRow(' ', 'out');">
Why does this function not work? Code: function colorRow(serverID, when)
{
if(when == ' ')
{
if(serverID == ' ')
{
className = 'noBG';
}
if(serverID == '1')
{
className = 'rowOdd';
}
if(serverID == '0')
{
className = 'rowEven';
}
}
if(when == 'over')
{
className = 'rowOver';
}
if(when == 'out')
{
if(serverID == '0')
{
className = 'rowEven';
}
if(serverID == '1')
{
className = 'rowOdd';
}
}
}
I am looking for a script that would prevent an image from being highlighted by dragging the mouse. Thank you.
I've spent some time trying to find a decent syntax highlighting javascript that will work in Firefox/Chrome and will work on <textarea> or at least act like a <textarea>. Bespin was working really well until I found out that I can only have 1 bespin div per page unless I use iframes (which wont work with my project) Codepress was really flakey and would sometimes show up as readonly in chrome. Syntax Highlighter doesn't say that it will work with a textarea (and I couldnt get it too) codeMirror also uses iframes. Anyone have some good suggestions? Hello everyone. This a css code in <head>: Code: .pagination{
width: 530px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: white;
padding: 5px 10px;
}
.pagination a{
padding: 0px 5px;
text-decoration: none;
color: #410B38;
font-weight:bold;
font-family:Arial;
background: white;
}
.pagination a:hover, .pagination a.selected{
color: white;
text-decoration: none;
font-weight:bold;
font-family:Arial;
background-color: #410B38;
}
for a div with class=pagination (below) which contains the pagination of mysql data display: Code: <div class="pagination">
<?php
$sql = "SELECT COUNT(id) FROM tablename";
$rs_result = mysql_query($sql,$mysql_connection);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / 5);
for ($i=1; $i<=$total_pages; $i++) {
echo "<a href='mysqldatadisplay.php?page=".$i."'>".$i."</a>";
};
?>
</div>
I want everytime someone clicks on another number in order to change page, that clicked number to have different style than the other numbers as long as one stays on that page and when one clicks on a different number I want that number to behave in the same way. Someting like highlighting the navigational item that you're on. Thank you very much in advance! Hey, I have a jQuery script running on my site that makes it so when you click on a thumbnail, a different overflow:hidden div is scrolled to the anchor point that thumbnail was linking to. I want to make it so the thumbnail that you clicked becomes selected (and all over thumbnails become unselected). This could be with a border, a shadow, an image appearing behind it, opacity - basically anything (preferably an image appearing behind it). I'm pretty much a javascript noob, but common sense tells me that this isn't possibly with basic CSS. How do I go about doing this? PS, if you want a clearer picture of what I'm referring to on my site, check http://bit.ly/83ftPF Thanks a ton for your time, I really appreciate it! -Joel I'm trying to implement a syntax highlighter in my program, but jQuery 1.2.6 is giving me problems. This line specifically: Code: parse: [/^(\[) *@?([\w-]+) *([!*$^~=]*) *('?"?)(.*?)\4 *\]/, /^(:)([\w-]+)\("?'?(.*?(\(.*?\))?[^(]*?)"?'?\)/, new RegExp("^([:.#]*)(" + chars + "+)")],
it messes with every javascript editor's syntax highlighting I've tried so far too. It looks like they're declaring a regex pattern without a delimiter. Can anybody make sense of this line? Alright so for my website (I've totally revamped it and what not) I want to make a code highlighter for source code / tutorials I've posted. At the moment I'm just using some css: Code: div.code
{
font:1em "Courier New";
margin: 10px auto 10px auto;
background-color: #FFFFFF;
border: thick solid #555555;
color: #000000;
white-space: pre;
font-size: 12;
}
So the code stays neat and in a box. But what I want to do now is somehow make a small javascript function that scans the text inside the html file etc : Code: <div class="code">float TimerTicksPerSecond = 0; float TimerTicksPerMillisecond = 0; int value = 0; std::string s = "hello world"; </div> and can format it so float and int is blue, "hello world" is red etc. Be a great help if someone can point me in the right direction. As from the javascript I've done myself I can't see it being to hard. I'm just unsure how to scan for text inside like I have above. Cheers Myth. I've implemented the Google CSE on my website and it works fine but I'd like to ask if there is a way to highlight the searched words on destination sites using javascript? i.e.: 1. I type into the search form the word I need to find on my website --> 2. I get result site with links to subsites --> 3. After clicking one of the listed links I go back to my website, to certain subsite --> 4. The word I've been searching for is highlighted so I can easily find it. Thanks in advance. |
|||||||