Changing Pseudo-elements' CSS
Jun 4, 2006Does anyone know how to do this in JavaScript? I want to change an element's :first-line property.
View 2 RepliesDoes anyone know how to do this in JavaScript? I want to change an element's :first-line property.
View 2 RepliesI want to change from:
a:hover { text-decoration:none; color:black; }
to
a:hover { text-decoration:underline; color:blue; }
using javascript ....
having a warning "unknown pseudo-class or pseudo-element 'visible' "
View 2 Replies View RelatedI am doing a form for my site and would like to enable and disable a radio
button set depending on whether one of the choices on an outer radio button
set is checked. How can I refer to all the inputs of the inner radio button
set (they all share a common name) with javascript. I tried
document.getElementsByNames('thename') but it doesn't work. I know this is
because this method returns an array which you must then refer to by a
specific index number, unless there is another way. I would like to refer to
all of them at once and then set their disabled status to false.
I have 4 checkboxes in my form and wanna change the number (to be displayed) according to the selection made on the ListBox Menu
HTML PART of the code
<select name= "rights" onChange="chk_Count(this);">
<option value = 0 > Admin </option>
<option value = 1> guest </option>
</select>
<input type= "checkbox" name = "add" value = "on">
<input type= "checkbox" name = "edit" value = "on">
<input type= "checkbox" name = "delete" value = "on">
<input type= "checkbox" name = "view" value = "on">
I want that when I select Guest onle checkboxes for "ADD" n "VIEW" should be shown and when Admin is selected all four. but I am able to find out how to access those elements in the form
and change their properties.
What website do any of you recommend for learning Javascript browser compatibility? I'd like to learn more about acceptable javascript programming.
I am using the script below for changing elements content without refreshing my page. Typically it works fine on recent Mozilla and IE releases if they haven't had too many hijacked settings. I know this isn't really much of an excuse for a script not to execute if it is done properly so I am hoping someone here can help me make what I have more compatible with more settings and browsers.
[Code]...
I have the impression $('h1:after') e.g. doesn't work. How to manipulate these pseudo selectors with jQuery?
View 1 Replies View Relatedis there a way to force a pseudo class on an element?
something like navObj.style.hover = true;
I haven't been able to find anything, but what I'm trying to do it make it so if you click on a button or whatever it keeps its active state until another button is clicked.
I am trying to use javascript to replace colors in css classes with hex values from a color selector (jscolor). It's working for basic classes and ids, but the stylesheet I need to work with contains contextual CSS and pseudo-classes and I can't figure out how to reference them. (The stylesheet I'm working with is pre-defined and I can't change it.) [code]...
How do I reference these? I don't know Javascript that well, I'm just a prototyper -- and I'm stumped!
in a list, as seen below, i would like to first of all change the order only by clicking a button.e.g. li_elem2 and li_elem3 should change their order (positions), maybe even in a nice animated way later on...i tried to change it by editing the css properties, but didn't work out. so now i would be happy about any other approach i can take to swap items, or change positions of two list items....
<ul class="rounded">
<li class="li_elem1">Liste 1</li>
<li class="li_elem2">Liste 2</li>
[code]....
i have a dropdown menu wrapped in a div attached to this div is the onmouseout event which hides the div this is working the problem however is when moving from 1 link to the next in the dropdown the onmouseout event of the wrapper div is firing and hiding the div prematurely [URl]
relevant code:
<div id="roster_drop" class="drop_menu" style="left: 128px;" onmouseout="this.style.display = 'none';">
<a href="roster.php">Superstars</a>
<a href="champions.php">Champions</a>
<a href="titlehistory.php">Title History</a>
</div>
how do i make the event only trigger when your mouse leaves the div itself and not crossing onto a link
I want to create a sort of pseudo click event, that is needed to launch a slideshow.when the page loads it would fire off a function that creates a clicks event, as if the user has clicked on an element, when in fact that they had not. i saw in the jquery documentation with the click function, you could click on one thing and then another click event would be created via another element.that's close to what i'm trying to
$('#other').click(function() {
$('#target').click();
});
I'm putting together an events calendar athttp:[URL].. Each event is a li item, and I use jQuery to assign the class "no-left-m" (no left margin) to li:nth-child(3n+1) for CSS layout purposes. I've also added the ability to show only events in certain categories. Unfortunately, the initial jQuery assigns the classes to li items from the DOM, and doesn't take into account the show/hide. This means that when I show only a single category, the margins are off.
[Code]...
how I can assign my classes dynamically to nth-child(3n+1) of *visible* items only?
I am trying to pass a variable (which is a number) to the :gt(index) pseudo-selector.var thisParentIndex = $(this).parent().index(); //get the index of parent
console.log(thisParentIndex);
$(this).parent().parent().find('div.line:gt(' + thisParentIndex + ')').hide();
this does not appear to work..
I'm creating a list of items which visually look like checkboxes. They will work similar to the ones used on eBay that allow you to select only new/used items. Mine are a little simpler though. Here is the markup:
<li>
<a href="#" class="catHeader trigger">Designers</a>
<ul class="nav-ul toggle_comtainer">
[code]....
I'm new to this forum and am trying to find answers to a few issues I've been having. I'm building a website for my music (I'm a novice with web design so bear with me) and I'm having trouble with this page - [URL]...
As you can see, when you click on the "Filter By" buttons, the relevant gallery opens in the iFrame and the Titles (such as Latest Photos and Live Photos) are altered onclick by using the changeText function. The problem with this is that when I use the browser "Back" button, the iFrame goes back, but the "changeText" doesn't go with it.
So I've been trying to find solutions to this. Someone on another forum suggested hiding the album titles in a hidden element on each gallery page, and the title in when you click on the Filter By buttons. They suggested first putting some code such as: <input type="hidden" name="AlbumTitle" value="Live Photos">
[Code]...
I have strip of navigation tabs, which are marked up as a <ul> and styled to look like tabs with borders and all that. In my stylesheet I have the pseudo-classes for :link , :visited , :hover , :active and all of those work fine.
But I'd like to have the browser highlight whichever link a viewer is currently on by having Javascript activate the already defined :active pseudo-class. What's the syntax for that? Is it even possible?
I've been googling for almost an hour and havn't gotten anything.
I would like to set the link's "visited" pseudo-class with javascript
without clicking on the link. My goal is to update the link's color
(previously set in the CSS file) to be "visited" without actually
clicking on the link and then clicking "back" in the browser.
Does anyone know how? Here are the following things I've already
tried to no avail:
var obj = document.getElementById("idOfMyLink");
//obj.visited=true; // NO
//obj.style.visited=true; // NO
//obj.click(); // NO, performs a click and takes me away from
current page
/*
// Setting the src of an iframe on the same page, trying to
"stuff" this URL into browser's "History"
var theFrame = document.getElementById("myiframe");
theFrame.src = obj.href;
// NO. The iframe does go to correct URL, but the link's color
doesn't update.*/Any ideas?
I currently have a normal link like Code:<a href="http://sitepoint.com" class="link">sitepoint</a> and when a user clicks on it I want to be able to change the "link" class to a different class. However, I don't want to add anything to the actual link html. Is it possible to do this using javascript without modifying the original link code?
View 4 Replies View RelatedI am trying to dynamically clear the value of a form input field and then submit the form.When I used $('#my_field').val('') to clear the field, it was cleared on the screen but when the form was submitted the original value of the input field was posted.My browser is FireFox and I can see using FireBug that when the field is cleared, firebug is still showing the html code with the old value. E.G. <input type="text" value="old_value" />The same situation occurred if I used $('#my_field').attr('value', '') to clear the field.The same situation occurred if I actually changed the value of the field rather than just clearing it.To work around this problem I ended up using the $('#my_field').removeAttr('value') to clear the field before it was submitted.
View 1 Replies View RelatedI am a complete novice when it come to Javascript. I copied the script for displaying random images at a specific interval (from javascriptkit.com). I would appreciate knowing whether the following is possible:
The pages are based on tables, so the parts that change are all cells.
1. Can I define text instead of an image in the array? i.e. can I have the image change to say an apple in one cell and the next cell have text explaining what an apple is?
2. Would it be possible to put a countdown timer for when the image/text is going to change?
Ive got a small image of a power button and when pressed the inner section on the button changes to yellow, but when its pressed down Im also trying to get part of my H1 (main header logo title) to change to yellow.
Ive created a span with an id surrounding the letters of the H1 that I want to change, the id being : "power";
The javascript that I have come up with so far and works is as follows:
<img id="poweron" src="http://www.sitepoint.com/forums/images/power.png" alt="Power on button" onmousedown="this.src='images/poweron.png';" onmouseup="this.src='images/power.png';"/>
I understand Im not really supposed to be using inline JS, and I know Ive got to create a function for the onmousedown event to trigger changing the H1 text, so am I under the right impression that the JS so far written is redundant and will have to be re-written so thats contained within a script placed just before the closing </body> and an external script for invoking the main function ?
I have a page I am working and I am having some trouble with: I need to show and hide areas based on a radio selection. I initally started using the show / hide feature in Jquery but the problem is the elements need to be removed but then put back if the user selects the radio buttonagain as it has form elements that have validaion on them. The validation is still trying to validate the form elements becuase they are still on the page but just not showing. This is the radio group the user makes the selection from:
<input name="terms_usr" type="radio" id="terms_usr_1" value="1"/>
<label for="terms_usr_1">Credit Card</label>
<input type="radio" name="terms_usr" id="terms_usr_2" value="2"/>
<label for="terms_usr_2">C.O.D</label>
[Code]....
I have HTML tags stored in XML. I want to be able to use these HTML elements with Javascript, just as you can with elements in document.body. How can it be done? (And don't try and tell me I should use server-side because I have written it all for Javascript and the project is nearly complete minus this and there are practical reasons for not doing this server-side. After all, anything is possible with Javascript!)
Let me explain:
- I have HTML templates such as this [URL]
- I want javascript to populate these templates then add them to my page
- The only way I know javascript can get this kind of data is by parsing XML
- I want to parse the XML then be able to use the HTML elements just like those in document.body
- As far as I'm aware, XML is the only good way of storing data for javascript. I don't want to store it in javascript variables (too much multiline data with " and '). Nor do I want to build it using document.createElement("div")... etc
As someone not yet with any experience in computer science etc, please ignore my poor terminology! However, I'm not a beginner when it comes to javascript.
Here's the script concerned but I doubt it'll help you understand my problem: [URL]
So i've got a form that adds an element onto the page. This is working. When I try to remove said elements, that works. But the same 'delete' button doesn't work on elements not generated by javascript.
Code JavaScript:
function destroyQuickTask() {
$.post($(this).attr("href"), null, null, "script");
[code]....
Has anyone ever had problems with changing the src of an embed after
the page has loaded?.
I have had this problem 2 times now and in result have had to actually
reinitialise the embed on the page with its new src. Is there not a way
round this which will save alot less time and alot less coding.