|
JavaScript - Highlighting A Thumbnail That's Been Selected
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 Similar TutorialsHI 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 like for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" 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'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? 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. 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? 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'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). 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! Alright, 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? 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 Hi all! I'm using a multiselect box on my website, similar to this one: <Select Name="multiselect[]" multiple="multiple"> <option>This is option 1</option> <option>This is option 2</option> <option>This is option 3</option> <option>This is option 4</option> </select> Now I want to set option 1, option 2 and option 3 as selected (highlighted) in javascript. How would I go about doing this? I tried something like this: document.taakform.elements['multiselect[]'].selectedIndex = "1" document.taakform.elements['multiselect[]'].selectedIndex = "2" document.taakform.elements['multiselect[]'].selectedIndex = "3" Of course this doesn't work (else I wouldn't be posting here ), but I hope you catch my drift. Thanks in advance guys (and gals)! Code:
// Code for alternating row colors on data tables, but NOT every table.... just ones with classname="altRows"
// Note: rowID comes from the JIT Variable: &&_sflalt
// Note: This function is called in ovject group: *TR in the MLS Syntax File
function stripeRows(rowVar)
{
// Need to create a var for uniquely identifying the highlighted rows
var rowID = 0;
// Begin the checking and writing of the HTML data
if (rowVar == '')
{
var html = "<tr>";
document.writeln(html);
}
else if (rowVar == '0')
{
var html = "<tr class=\"rowEven\" id=\"evenRow"+rowID+"\" onmouseover=\"highlightRow('over', 'evenRow"+rowID+"');\" onmouseout=\"highlightRow('out', evenRow"+rowID+"');\">";
document.writeln(html);
rowID++;
}
else if (rowVar == '1')
{
var html = "<tr class=\"rowOdd\" id=\"oddRow"+rowID+"\" onmouseover=\"highlightRow('over', 'oddRow"+rowID+"');\" onmouseout=\"highlightRow('out', oddRow"+rowID+"');\">";
document.writeln(html);
rowID++;
}
else
{
var alertText = "Something went wrong with alternating row color in datasets - The function broke. Please jot down a note as to what you were doing when this dialogue box poped up, and let American Health Care Software know \n\n\n ATTN: Pat Litke";
parent.showDialog('Broken Function',alertText,'prompt');
}
}
// Function for modifying class attrbutes for row highlighting..
// This function will allows the currently moused-over row to highlight a different color based on its ID
function highlightRow(option, theRowID)
{
var row = document.getElementById(theRowID);
if(option == 'over')
{
row.className = 'rowOver';
}
if(option == 'out')
{
row.className = 'rowEven';
} else if(option == 'in')
{
row.className = 'rowOdd';
} else { }
}
Can someone help? I can't figure out why this isn't working the way that I'm logically seeing it... The alternate rows highlight works fine, but the mouseover and mouseout events fail miserebly... When a page loads, regardless of where i mouse over, only the top two rows color in with the mouseOver color. They also don't revert to original coloring. Where am I going wrong? Note: I apologize if it's something little that I'm missing... I'm still new to js Hello, I have a regular expression that returns multiple matches. For e.g. If the user types a string "980ee,34223,werw" in a textbox, the regular expression match returns "ee" and "werw". I would like to highlight both "ee" and "werw" in the textbox. How can I achieve this? Thank you. 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 Hi all, I have the following code in my html. <form name="createaccount" action="" method="post"> <div class="formrow"> <label>Select an Avatar:</label> <div class="fieldcontent"> <img src="images/avatar1.jpg" class="avatargal" id="Image1" /> <input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image1');" onblur="imageoff('Image1');" /> <img src="images/avatar3.jpg" class="avatargal" id="Image2" /> <input type="radio" name="selectavatar" class="radiobtn" checked="checked" onclick="imageon('Image2');" onblur="imageoff('Image2');" /> <img src="images/avatar4.jpg" class="avatargal" id="Image3" /> <input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image3');" onblur="imageoff('Image3');" /> <img src="images/avatar5.jpg" class="avatargal" id="Image4" /> <input type="radio" name="selectavatar" class="radiobtn lastbutton" onclick="imageon('Image4');" onblur="imageoff('Image4');" /> <img src="images/avatar3.jpg" class="avatargal" id="Image5" /> <input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image5');" onblur="imageoff('Image5');" /> <img src="images/avatar5.jpg" class="avatargal" id="Image6" /> <input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image6');" onblur="imageoff('Image6');" /> <img src="images/avatar1.jpg" class="avatargal" id="Image7" /> <input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image7');" onblur="imageoff('Image7');" /> <img src="images/avatar4.jpg" class="avatargal" id="Image8" /> <input type="radio" name="selectavatar" class="radiobtn lastbutton" onclick="imageon('Image8');" onblur="imageoff('Image8');" /> </div> </div> </form> ----------- The javascipt is: function imageon(here) { var elem= document.getElementById(here); elem.style.border = "solid 2px blue"; } function imageoff(here) { var elem= document.getElementById(here); elem.style.border = "solid 2px white"; } ---------- When user clicks radio button near "Image1" then "Image1" is highlighted in blue color border, and previously selected image gets white border. This works in firefox and internet explorer but not on chrome and safari. Any help? I have a cgi script (using perl for database queries) in which I have two select boxes. I am populating the left select box with rows from a database, and then provide buttons for people to move items to the right select box. So far so good, everything works, the move right, move left, and move right all and move left all buttons work, data is always sorted in both lists. My only problem is, when I click the submit button, the follow up program only displays data that was highlighted/selected in the right select box, not all of the data in the right select box. I don't know how to tell the script, via javascript, to highlight everything in the right select box when the submit form button is clicked. I would think i could just call a function via -onClick for the submit button. I could use some help with the function to select all data in that list. I can post code if it is helpful. Thanks, Taylor So about a couple of weeks ago I decided to start learning the basics of web development and design through the w3schools website. I found no problems learning HTML/XHTML and CSS1/2/3. I decided the best way to learn these languages was to implement something from each language into a project (a website, which is currently stored locally on my laptop) The project is a site dedicated to favourite images of my family. In it is a main image viewer, followed by a nav bar underneath displaying thumbnails of a few images. I implemented a small JS script so when I click a thumbnail, the corresponding image is displayed within the main image viewer. I then moved onto jQuery in my development knowledge quest, and decided the next thing I wanted to do was add more images to the nav bar and be able to scroll (with two buttons) across the nav bar. This is where I've hit an end stop in being able to do this with no help. So to begin with, this is my HTML for the thumbnail navbar: Code: <div class="scrollWrapper">
<div class="controlsPrev"></div>
<div class="controlsNext"></div>
<div class="scrollableArea">
<p><input type="image" src="images/home/54.jpg" alt="Image" onclick="displayImage('images/home/54.jpg')" /></p>
<p><input type="image" src="images/home/55.jpg" alt="Image" onclick="displayImage('images/home/55.jpg')" /></p>
<p><input type="image" src="images/home/56.jpg" alt="Image" onclick="displayImage('images/home/56.jpg')" /></p>
<p><input type="image" src="images/home/57.jpg" alt="Image" onclick="displayImage('images/home/57.jpg')" /></p>
<p><input type="image" src="images/home/58.jpg" alt="Image" onclick="displayImage('images/home/58.jpg')" /></p>
<p><input type="image" src="images/home/59.jpg" alt="Image" onclick="displayImage('images/home/59.jpg')" /></p>
<p><input type="image" src="images/home/60.jpg" alt="Image" onclick="displayImage('images/home/60.jpg')" /></p>
<p><input type="image" src="images/home/61.jpg" alt="Image" onclick="displayImage('images/home/61.jpg')" /></p>
<p><input type="image" src="images/home/62.jpg" alt="Image" onclick="displayImage('images/home/62.jpg')" /></p>
<p><input type="image" src="images/home/63.jpg" alt="Image" onclick="displayImage('images/home/63.jpg')" /></p>
</div>
</div>
</div>
CSS Styling (external sheet): Code: div.scrollWrapper
{
background-color:#252525;
width:960px;
height:115px;
display:block;
overflow:hidden;
}
div.scrollableArea
{
height:115px;
}
div.scrollableArea p
{
margin:0;
}
div.controlsPrev
{
height:115px;
width:65px;
background-color:#FFFFFF;
position:absolute;
}
div.controlsNext
{
height:115px;
width:65px;
background-color:#FFFFFF;
position:absolute;
right:195px;
}
My first problem is that now I have added further <p> elements to the navbar, they "wrap" to the next line, causing scrollableArea to be double the height. The second problem is implementing some code to bring the navbar to life. Since it's jQuery (and I've linked the googleapis library in my html document) I thought the custom animation methods would be the best way to create this effect. Though I've thought of a few obstacles in my way, namely: 1. How to hide the right most or left most (depending on which control class eg. Prev or Next) <p> element and show the opposite <p> element at the same time, and also shift or slide all other <p> elements in view across (again depending on which control class or direction control I have clicked). 2. I want flexible code, that allows for (in the future) more <p> elements. All my code has been based around flexibility and the fact that it will be constantly changing at a fast rate. Therefore I think a function within my script to count the number of <p> elements within the scrollableArea would resolve this issue somewhat. Any help or advice given on the subject would be greatly appreciated, if there would be another method to get the desired effect then please share. I've stayed away from plug-ins apart from the generic jQuery library provided by google, I want to be able to say I have created everything by myself and not "cheated" if you will. It doesn't take a genius to implement plug-ins into code, I see it on various websites and have seen developers use them before and claim them as their own. I took a look at a few tutorials on the subject, but I haven't found anything specific to my cause. Cheers dudes, Johnny. |
|||||||