I imagine this is trivial - in fact it must have been asked before, I just can't find the answer. I have looked.I have a dotted bottom border defined on my link hovers, like so [code]
View 5 RepliesI am trying to create a border effect on hover so when the use hovers over a link the css border changes color to create some interactivity and also as a point of reference too.
Here is the code so far I just do not know how to implement the fade effect for the border to fade on hover;
Is there any way that I can simply change this code to work with it.
$(document).ready(function(){
$(".recentbot3, .recentLeft, .recentbot2, .recentcol1, .recentcol2, .recentbotLeft").hover(function(){
$(".recentbot3, .recentLeft, .recentbot2, .recentcol1, .recentcol2,
[Code].....
I have the following problem:
An input field get a border assigned by a style class (e.g. 2px solid red).
When the field gets the focus, we set the border to green.
element.style.border = "2px solid green";
When the field looses the focus, the border should change back to red.
We just want to remove the style we have set, when the field has got the
focus, so that the style class is visible again.
element.style.border = "";
Under Firefox that works but not under IE.
We have changed to the class mode, because we don't want to save the
previous setting and restore it later.
Is there a possibility to remove the style (especially the border style)
under IE, so that the style of the assigned class is visible again?
element.style.removeAttribute doesn't seem to work, but may be I make
something wrong? Code:
sing Javascript, on mouseover/hover, I would like to change the boder color of my textbox from
rgb(142, 142, 142) to black: rgb(0, 0, 0,) then when I move the mouse pointer off the textbox, I would like it to change from black back to rgb(142, 142, 142).I can't figure out where to start or how to get this going.
I made a popup window with createpopup(). The window has a frame
border around it that is grey. I can't seem to find the code that
would not allow the frame of the popup to show.
I've experimented with this:
this.mypopup.document.frameborder=0;
window.frame=0;
Ultimately, I would like to know if it is possible to get rid of the
frame border on the popup window created from createpopup();
i am using the object flash embed instead of the swfobject or flashobject because I am embedding using js innerHTML. Is there a way to loose the dotted border in IE that swfobject fixes? The movie needs no interactivity its just a swf animation.
View 5 Replies View RelatedThe aim of the exercise is to be able to hover over a hyperlink in a dataview table and load the content of one of that page's paragraphs into a div (#notes) on the current page (I may want to load that into a tooltip later but I'll walk before I can run!) and then when I hover off the hyperlink, the loaded content is removed again.I'm using a combination of .hover and .load to load the paragraph and the first part works fine - hover on and the content from the page appears in the div. However when I hover off, instead of removing the content, it loads it again instead - so instead of an on/off effect, it just spawns more and more of the same content.
I'm not sure it matters but I'm doing this in SharePoint 07 and have put the code in a content editor webpart for simplicity. I've substituted the actual page url for 'myurl' below but in practice this part of the code seems to work ok - it's the mouse out portion which doesn't seem to work.If what I want is possible, can you see what is wrong with my code?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
[code]....
How can I remove the hover event in jquery after the click event is triggered...?
jquery:
Code:
$('li').hover(function(e){
},function(){
});
[Code]...
Looking for some assistance with using hover on externally loaded content.I have a web page with a DIV that I LOAD with an external webpage.The external webpage once loaded has a DIV that when hovered over PREPENDs items to the DIV . This part seems to be working.hen the DIV is no longer hovered over the prepended items should be removed, but alas they are not.Please take a look at the following and point out my error.
<script type="text/javascript">
//ADD THINGS
$("#apDiv10").live('hover', function()
[code]....
What I want to do is change the border of several images on the page to show a 4px border. There are many images on the page so I just want to call the changeborder() function on the onClick event so as the image that has been clicked changes. However, I don't think using this.style.border to identify the element works when placed within the function. That is, how do I identify, from the function, which image has been clicked? My current code (which does not work) looks like this but I am sure its possible to gather what i'm trying to achieve:
<script type="text/javascript">
function changeborder()
{
this.style.border='4px solid red'
}
</script>
<img style="border: 1px solid #F4F4F4;" onclick="changeborder()" src="images/colours/010.jpg" border="0">
is there a way how to detect if mouse is over the border table and over cell border? and if yes, when user click and host button and move mouse cursor (to increase cell width) which event should i detect ?
View 1 Replies View RelatedThis time I have a trouble with remove(). Here is my code :
$.each(val.produitsIds,
function (j, val2) {
if($('#chk_' + i).prop("checked")){
//$('#' + val2).prepend("<div>liste des tailles</div>");
$('#' + val2).prepend("<div>" + $('#chk_' + i).attr("value") + "</div>");
}
[Code]...
I want to remove a specific box when i click on the remove button in that box. I have a lot of boxes on a page but when i click on the remove btn it removes all the boxes. I just want to remove the box where i click on the delete btn.
This is the js code:
$(".del").click(function() {
$('div.floating-box').remove();
});
[Code].....
've been grinding this for days and nothing seems to work. I'm using a JQuery script (or a variant) called the bx.Slider [URL].. It works well. It's all positioned properly. I use my own prev/next images, and there is the ugly blue border around them in IE 8 only. I've tried removing the border, both in the js file (jquery.bxSlider.min.js), in my own syle sheets where you can style the js created classes, or inline, in the tags themselves... None have worked in any way, shape or form.
Maybe I am looking in the wrong places, but I can't seem to find the answer. Does anyone know of a trick or two regarding this?
...I have an element (for example <div>) that i displayed in my browser is overflowed and overflow is hidden.Now after displaying browser when I move my mouse over to it, I want to add a border to the <div> using jQuery Code:.css("border","2px solid red"). But the problem is::: at left side and top side border is added but at bottom and right border not added since these 2 sides overflowed.
I've been searching for a way to get border-radius working in Internet Explorer by using JavaScript or a JavaScript library like jQuery. With so many browsers now supporting border-radius, it just seems silly to me that we use all this extra markup just for rounded corners in IE.
View 7 Replies View RelatedHow would that be?something like this?:
if ($(this).(BORDER-COLOR PROPERTY?) == "#990033")
{
alert("Yes, border color is #990033");
[code]....
I taught it to myself without even having any true JavaScript experience and am sure that while functional, many of my implementations could/should be written completely differently. I'm running some animations that look great in everything except for IE. In IE I'm seeing a thin, ragged black border around some of the elements that I'm animating.
View 1 Replies View RelatedI have a couple of images in a fisheye that I want to be displayed with some space between them. Currently, jQuery displays the images directly connected to each other:
[Code]...
I have CSS defined as:
#container {
width:400px;
border:1px solid red;
}
I was not able to get the value using $("#container").css("border"), but $("#container").css("width") is ok,
I'm trying to animate a rounded border of a div. In this post someone posted an solution which works in Chrome and Safari (didn't test it yet in IE), but for sure doesn't work in FF:
Code:
$("selector")
.css({
WebkitBorderTopLeftRadius: 10,
[code]....
See the table code below. Because this table is created by a third party application, I can't modify their code. So, I'm stuck trying to find other ways to change the table styles. I figured jQuery would be a great way to accomplish this, but I can't figure out the correct code. Can someone show me how to change all cells, or certain cells (dddefault and ddlabel) to have a border? I've gotten close, but it only affects the first cell.
<TABLE CLASS="datadisplaytable" SUMMARY="This layout table is used to present the weekly course schedule." WIDTH="80%">
<TR>
<TH CLASS="ddheader" scope="col" > </TH>
<TH CLASS="ddheader" scope="col" > Monday </TH>
[code]....
I have to ad a line between some rows, but not for the first col.the table has:table { border-collapse: collapse }that is fix and I can not change it.the following sample code draws the lines nicely in IE6 but in FF there'sjust nothing (also used color here, to see if the selectors are right):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
[code]....
autocomplete border for suggestion list is not showing properly when i am changing it's width.
View 1 Replies View RelatedI'm currently reading jQuery - Novice to Ninja (fantastic book), and trying to understand how I can add several words to the code snippet below. I currently remove, let's say Sweden as below, but what if I also want to remove Norway?And another question, what if I would like to keep only Sweden and remove the rest from a list of twenty countries? How would I do that?
Code JavaScript:
jQuery(document).ready(function() {
jQuery('#countries tbody').remove(':contains("Sweden")');
[code]....
Umm, this is a tricky one to add a descriptive title for!
Basically I have two links on the page that go to the same page when clicked. What I want to do is when I hover over one of those links for the hover to work for both of them and visa versa.
So I have this links
<a class="connected" href="">Connected</a>
<a class="remove" href="">Remove</a>
a.connected { background: url(../images/connected.png) no-repeat 0 top; }
a.connected:hover { background: url(../images/connected.png) no-repeat 0 bottom; }
[Code]....