Im just starting to get into javascript, and what I am trying to do is
find a script that I can run on page load that will collapse / hide all
div tages that have an id that begins with "div_".
Basically I have a page with an infinite amount of div tags each having
their own id, ie div_0 , div_1 etc etc ..
on page load i want them all closed, but only these ones . not any
other div on the page .. how would I be able to do this ..
Ive got the follwoing javascript code that will expand/collapse a section of my site that is enclosed within a <div> tag.
function showorhide(id) {
if (document.getElementById(id).style.display == "none")
{
document.getElementById(id).style.display = "block";
}
else
{
document.getElementById(id).style.display = "none";
}
I am using asp.net 2.0 to code my site with, the above code works fine (example below:
<a href="#" Personal and Contact Details</a>
<div id="basicdetails">
</div>
All that is enclosed within the <div id="basicdetails"> is expanded / collapsed.
HOWEVER, im geting a few problems with this method: 1. On a page load, the div tags are always displayed, is there any way of having them collapsed on page_load?
2. When i put 2 seperate <div> tags (i.e. 2 seperate expand/collapse sections on the same page), one is collapsed and one is expanded, when working within the expanded one and a button is clicked (for saving of info from a form), both divs are then expanded?
I have a div, and a container div. This div is my footer. I want to beable to slide items up out of the footer. However, when I use the toggle() and use marginTop/marginBottom it slides perfectly, but only expands the div downwards thus causing scrollbars to appear. Is it possible to define which way you would like a div to expand?
So just to be clear here is my code:<style>
#footer-container{
overflow:hidden;
z-index:100;
position:relative;
border:1px solid #f00;
width:1000px;
margin:auto;
}#footer{
width:1000px;
margin:auto;
height:32px !important;
background: url('../../img/footer/footer_bg.png') repeat-x;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#555;
margin-bottom:0;
bottom:0;
padding:0;
}
<div id="footer-container">
<div id="footer">
some contend links etc..
</div></div>
As you can see from above there is an overflow of hidden set to the container div. The footer div has a height of 32px and bg image. The only way I can get this to work is if I put a postion:fixed on the #footer. This is not what I want, because it then remains on top/in position when scrolling the page. Is it possible to set a div's expansion direction in jQuery? The above expands the div downwards. I would like to expand it upwards.
How can I find all TR that have any attribute starting with 'c'.
something like
$(TR[^c]).css("background","yellow") <-- doesn't works
My CMS won't let me customize their HTML structure they didn't give me access to their templating system. But they'd let me access their Head section were I could add custom Javascript and CSS. Example this would be their template structure:
<body>
<div id="wrapper">
<div id="maincontent"> Maincontent </div>
<div id="left"> Left Contents </div>
[Code].....
The reason why the injections was structured like that is, I want the regular divs to be rounded. the Inject1, Inject2, Inject3 would be style in my external CSS. I think it would also be great if it was like a class that i can just be apply it to specific ids or class.
How do I wrap repeated sets of [ <h3> followed by other tags ] in a div?
example:
<h3>
<ul><li>
<h3>
I want to wrap everything between the lines in a single [ <div class="test"</div> ] ? The # of tags in between the lines ( i.e. # of tags following <h3> ) will vary after each <h3> tag.
I need some help creating some regular expressions that remove specific html tags...the script/expression will run when a button is clicked (i.e. "Remove Bold" button will remove <b> </b>).
currently I have these expressions working but they do not accomplish what exactly what I am after...Actually the functionality I'm looking for will incorperate both, however I can't seem to get it to work properly...
data.replace(/<[^>]+>/ig,"")+""); - this removes all tags (no matter what kind), I would like it to be a little less "greedy" and only remove specific tags.
i.e:
Input = <u><b>THIS IS SOME DATA</b></u>
Output= THIS IS SOME DATA
data.replace(/<(B|b)[^>]*>[^<]*(</B>|</b>)/ig,"")+""); - this removes bold tags and will leave other tags like <u> behind, exactly what I was looking for. However, it also removes the content/data that is wrapped in the tag.
i.e:
Input = <u><b>THIS IS SOME DATA</b></u>
Output= <u></u>
In the above example what I would like to happen is:
Input = <b><u>THIS IS SOME DATA</u></b>
Output= <u>THIS IS SOME DATA</u>
Any suggestions?
Well after much trial and error I come asking for help. I am trying to write a greasemonkey script that scans a page for all the values between certain <td> tags. When I used firebug it shows what I am looking for as <td class="username">THEUSERNAME</td> but when I view the source it just shows up as <td>THEUSERNAME</td> I want to create an array of the 100 <td>'s on the page that pertain to usernames but none of the other <td>'s
I created a test page that mimicked the code, what I thought origionally, to be so I could test my script with ease. And it worked when there was an actually <td class="username">
This is what I have so far:
// ==UserScript==
//
//Displayable Name of your script
// @name EXAMPLE
[Code].....
Can't seem to make it work, I have seen many examples but they are all just for 1 div tag. When i trymore than one it doesn't work anymore.The first one works, if i have more than 1 then the other don't work.
using the following jquery
$(document).ready(function(){
$("#toggle-text").click(function () {
var divvalue= this.value;
[Code]....
I use Firefox and am wondering how to select a word and wrap [b] tags or [quote] tags around it?
View 30 Replies View Related<div class="box top"></div>
<div class="box main">
<div class="box header">
<div class="badge"><ul><li class="active"><span>60</span></li></ul></div>
[Code]....
What is happening is $(this) is no longer based on .expand being the (this) that is clicked.
like if i have a button SOMEWHERE randomly on the page with this
<div onclick="Minimize('_alerts');">Click Here</div> this will minimize alerts but because the (this) in minimize function doesn't actually point to the right button that I want to add a class to.
Is there a way to modify the minimize function so that it finds the <div id="mytoggle"><ul> <li class="expand boxminimize" rel="_alerts"> using the rel toggle, and then changes the class of the li from expand boxminimize to boxexpanded??
just like the .expand click function I posted on the top of the post that works?
Another thing that has been driving me crazy is that css positioning is handled differently by different browsers. JS is not my area, but I can do a lot with CSS, and I do, but cross browser compatibility is killing me.
I can use an IF IE statement and only IE runs that segment of code, but I haven't been able to figure out out how to make ONLY firefox or ONLY opera or safari enact an encapsulated segment of code. The same type of IF statement doesn't work for them.
Is there a single method using JS that works for all browsers?
I know this code works just fine:
function result(){
var result = document.getElementById('resss').innerHTML;
}
But what I actually want is to import data from a table of an external website. E.g. I want to get the innerHTML of a specific cell in column 3 and row 2 of a specific site.
Is it possible to trigger the action of a form with a submit button that's outside the form tags? If so, how should this example be rescripted to make the input tag work outside the form tags?
View 3 Replies View Related<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> grow test</title>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript">
var img_width = 100;
var timer = null;
function imageGrow(imgid)
{
var growImg = document.getElementById(imgid).style;
growImg.width= img_width+'px'
if(img_width < 500)
{
img_width += 10;
timer = setTimeout('imageGrow("' + imgid + '")', 60);
}
else
{
clearTimeout(timer);
document.getElementById('contrlD').style.display = "block";
document.getElementById('contrl').style.display = "none";
}
}
function imageShrink(imgid)
{
var growImg = document.getElementById(imgid).style;
growImg.width= img_width+'px'
if(img_width > 100)
{
img_width-= 10;
timer = setTimeout('imageShrink("' + imgid + '")', 60);
}
else
{
clearTimeout(timer);
document.getElementById('contrl').style.display = "block";
document.getElementById('contrlD').style.display = "none";
}
}
function changeSize(imgid)
{
if(img_width <= 100)
{
imageGrow(imgid)
}
else
{
imageShrink(imgid)
}
}
</script>
</head>
<body>
<div id = "container" style = "text-align:center; ">
<div id = "contrl">Click image to enlarge it</div>
<div id = "contrlD" style = "display:none;">Click image again to restore it </div>
<img src = "0.jpg" id = "imageResize" name = "imageResize" onclick="changeSize(this.id)" />
<img src = "1.jpg" id = "imageResize1" onclick="changeSize(this.id)" />
<img src = "test.jpg" width = "100" id = "imageResize2" onclick="changeSize(this.id)" />
<img src = "snow.jpg" width = "100" id = "imageResize3" onclick="changeSize(this.id)" />
<div id = "content" style = "position:absolute; top:400px; left:10px; background:blue; width:100%;">
Content of page here!!
</div>
</div>
</body></html>
I hope this is usefull to someone. Page validates and works in IE and FF.
I have been trying to get a simple javascript that expands and collapse's a set of div's. Now this works a treat in its own html file. but when I use the div's in the product display the javscript doent work?? :-( anyone know why??
My shopping cart is template and database driven, with each part having its own template file. the divs are in the product discription which is pulled from the database.
Is there a way to expand and collapse in JavaScript? What's the best way?
View 1 Replies View RelatedI have a form with a drop down combo box of a specified size. However,
I would really really like it if the user was looking at the contents of the
list it would expand to fit the text in the list. However, I believe
that IE does not allow the rendering of popdowns in this manner!
Is there some other way that I can do this using javascript and html/dhtml maybe?
I'm very new to JQ, I was looking for a solution to expand a div on mouse hover from its center to display some dynamic text wrapped in a code tag, I found and tried to fit to my needs this little piece of code, however is not exactly what I'm trying to do.
[Code]...
Can anyone show me the code for a simple expanding navigation bar? I need to roll over the nav bar and for it to drop down with more options.
I know the code will be straight forward, I can't work it out though.
I have the following code:
Code:
<li onclick="javascript:showdesc('This is info about trucking', 'truck');">Trucking</li>
<div id="trucking"></div>
<li onclick="javascript:showdesc('This is info about bulk delivery', 'bulk');">Bulk Delivery</li>
[Code]...
This all works good, however when I click on some of these it just moves the text down the page but it doesn't expand the column and the text at the bottom just gets pushed down past the page.
I've created an ad unit which is to be embedded on other sites. In this ad unit are links which when clicked upon, as supposed to lightbox the link using lightview over the whole page, not just inside the ad unit embed.
I've used iframe and object tags and the result is that the content always opens inside the object frame. Is there any way, other than a flash embed which expands, to do this? Basically, what I'm looking for is a non-Flash ability to overlay something over the whole page (or at least expanded outside of the embed)
I have a div which I want to increase in pixel size by 10px each time a button is checked. The change in size needs to be animated. At the moment, I can only get it to increase to a fixed dimension:
$(document).ready(function(){
$("#expand").click(function(){
$(".my-div").animate({
width: "10px"
[Code].....
How do I get it to keep expanding by 10px each click?
I'm using jquery file tree and was wondering if anyone knew how one would go about expanding the first nodes upon load?[URL]...
View 1 Replies View RelatedIf I use jQuery 1.2.6 it work, but if I use last version 1.6 it stop working.
$(document).ready(function() {
$('div.menu:eq()> div.subnav').hide();
$('div.menu:eq()> div.navhead').click(function() {
$(this).next().slideToggle('fast');
});
how to embed YouTube videos into a vBulletin installation of mine. How would I go about making a vertically expanding table that expand when the user would click on the "YouTube" text? I'm thinking of starting out out as a size maybe 100px high and 400px wide, and expand to 375px high and 450px tall. I've checked Google, but nothing seemed to come up that I could use.
View 3 Replies View Related