I started developing a website that for many aspects should be similar to a Flash website but of course only in JS. What a challenge! An important part, of course, should be the managing of the position of the objects and to do so I need at least to be able to get all the properties from them, also if they have dynamic content. The very simple issue I'm stuck at the moment is to get the width of a div that contain a text, to place at its right the next div. I have very different behaviors in IE and Mozilla when I move a DIV. In fact given this structure:
how to add extra properties to html elements as I was storing data in html attributes. After looking at some others code including Raphael and this addEvent code. [URL] They seem to treat objects just like an array. obj[property] = value; This would have been extremely helpful to know previously as I have needed to be able to include variables in property names - but have resorted to making the whole thing a string and calling exec() on it.
i want to set page properties within the page itself. i can easily open a new window, but i don't want to have to do that. width, height, toolbar, scroolbar, navigation, etc... it seems like i've done this before, but for some reason i'm drawing a blank. any suggestions out there?
I am trying to let my user hide or show certain div's on a page. I am managing it in Firefox but IE wont do it for me. IE errors saying Object doesnt support the Property or Method? I have dynamic naming for the divs and call the script like so where you see x my array fills in the number index so the div's gets id's like myDiv(0) up to whatever.
Code: <a href="javascript:showhide('myDiv(<%=x%>)')">Show Hide Div</a> The Script that gets used is as follows. Code: <script language="javascript"> <!-- var state = 'none'; function showhide(myDiv) { if (state == 'block') { state = 'none'; } else { state = 'block'; } if (document.all) { //IS IE 4 or 5 (or 6 beta) eval( "document.all." + myDiv + ".style.display = state"); } if (document.layers) { //IS NETSCAPE 4 or below document.layers[myDiv].display = state; } if (document.getElementById &&!document.all) { hza = document.getElementById(myDiv); hza.style.display = state; }} //--> </script>
The following code displays the name for all three elements in IE, but fails for the1st and 3rd in Firefox. What could be going on? I tried SPAN instead of DIV doesn;t work either. (What I finally want is to set style.invisibility for the text in that DIV) Code:
I don't know why but the div "Bill" is not working. I mean whatever I want to display is getting displayed in the section of div "txtHint". Here is the code:
PHP Code: <?php require_once("../share /common.php"); session_cache_limiter(null); $tab = "profile"; $nav = "profile"; require_once("../shared/header.php"); require_once("../classes/Localize.php"); $sql=mysql_query("select sub_category,category_name,id from sub_category"); $sql_cat=mysql_query("select category from category"); $sql_cat1=mysql_query("select category from category");?>.....
I have a series of divs in 2 blocks say BLOCK1 and BLOCK2 and I want to use one click to expand/collapse all those in each block. But the code I came up with exapands all the divs in the entire page.
How do I restrict it to each block and also how do I cllapse those in each block and change the text to Collapse All. I am stumped here. Any help really really appreciated. Here is my code:
I need to be able to fade in 3 divs but not all at the same time, I need one to fade when thats finished, fade in then the next, then the next. Can anyone help me with this? I assume its got something to do with queue's but im not 100%
When I use the load function on my first page (index.html): $('#content').load('page1.html #content'); I got two divs on my page with the same id (id="content"). ... <div id="content"> <div id="content">Content from page1.html</div> </div> ... How do I resolve this issue without a another div?
I am trying to use the Conveyor Belt slideshow script, from Dynamic Drive. [URL]. I have two DIVS, one on top of the other, and I would like to use this script in both places, on the same page. For the life of me, and many, many, many hours later, I cannot get it to work.
There is a project called Seed which allows JavaScript programs to run on the Linux desktop. There is connected project called SeedKit which runs HTML files as a Graphical User Interface front end for JavaScript files run by Seed. It acts like a webpage which rather than linked to a web-server is linked to a JavaScript program with HTML events like buton clicks etc that drives JavaScript much in the same way as normal desktop Graphical toolkits do. I hope this page from my blog starts a bit.
http:[url]....
Both projects are quite new so is very experimental. I am not involved in the development of any of the projects but I am trying to create a few examples to show how it works. My first example is to take the contents of the log folder /var/log, display it in the SeedKit HTML file and when a user clicks on it, it displays the contents of the log file.The way I am going about this is firstly to create a two column table in the HTML thus:
<!DOCTYPE html> <html lang="en"> <head>[code]....
The table on the HTML file is populated with the file names but I can't get the contents of the specific div I have clicked on. I tried $(this).text() but it displays all the text in the table.
Is it possible to block the entire page but then override certain divs with an unblock command? Basically, I want to implement the block function when someone clicks the submit button on a form but if they have missed a question then unblock just this question div so it's nice and clear that's the one they need to correct?
I have a little issue with trying to hide / show multiple divs on my page. I am using a class name for the divs but the name is generated by a field have set in my database. So for example <div class="General">Ttitle 1</div> <div class="General">Ttitle 2</div> <div class="General">Ttitle 3</div> <!-- and my link is --> <a href="#" class="toggle" title="General">Toggle 1</a>
And then say I have <div class="Questions">Ttitle 1</div> <div class=" Questions ">Ttitle 2</div> <div class=" Questions ">Ttitle 3</div> <!-- and my link is --><a href="#" class="toggle" title=" Questions ">Toggle 2</a>
What would be the easiest way or the best way to code out the jquery to hide / show all the divs with the same name as the links title i can do code jquery to toggle 1 div but not sure how to code it so that it will hide / show all the divs with the same class name.
$(document).ready(function(){ //when a link inside our thumbba div is clicked $('#thumbb a').click(function(event){ //prevent the default behavior(going to the page)
[Code]....
to swap out content from a hidden div (swap-b) into the visible div (swap-a) - this works great, however, I have 12 of these "hidden" divs on the page, and I want each one to behave independently. Currently, when I click the swap button for one div, it activates all the others. I get that this is because all the divs have the same IDs, and that the function is telling all the divs to behave the same, however, I don't see how I'm supposed to apply this function to each div independently. I've tried using a "this" function to make it work, however that just breaks the function.
I've designed a web page that uses several DIVs that use absolute positioning so they can layer on top of each other with transparent shadows. You can view the design here:http:[url]...The client wanted the whole design to center in the window horizontally, and since I can't use margin: 0 auto; to achieve this, I'm using a script that detects the window size using the onLoad operator in the body tag. This is the script:
Code: <!-- window.onresize= alertSize; function alertSize() {[code].....
It works, but I don't like that the page snaps back to the left every time a new page loads. Is there a way for the script to detect the window size from the previous page so that the design won't jump if the window hasn't been resized?
I have five DIV tags that contain a photo and brief bio for partners of an accounting firm. I need to randomize these DIV tags (id="d1" - "d5") to display only one of the tags on each page load. Normally, I would do this with ColdFusion but the client isn't willing to purchase the language support for their hosting system. A sample of one of the DIVs is below.
The two page sections you see on the page "One Time Gift" or "Monthly Subscription" are normally hidden via a document.write via a body onload. Generally, all of this functions well. But, I want to expand the use a bit here so I want to pass a $_POST value to this page from another page which hides or shows these two sections based on this passed value. So, if the value in "once", I want the div with the id="onetime" to be visible and the other div to be hidden. If the value is "monthly", then the opposite would happen. Now this is supposed to all happen as the page loads because we are just arrivng here from the sending page.
[URL].. I have used some jQuery to hide two divs (#choices and #review) until a selection of "yes" or "no" is made. My problem is that as the page loads, these div's are displayed for a split second until the jQuery hides them. Can anyone tell me a better way or a fix for the existing code that I am using?
I am using javascript to switch between a series of divs, on clicking a navigation tab the divs display property is set to 'block' and all other divs have their display property set to 'none'. That works fine, the problem I have is when I redirect to another page (e.g. a PHP script) on return to the index the divs have reset and only the default div is shown, rather than the div that was showing when the user left the page. The solution, as I see it, is two stages: Write a function to display the relevant div based on the variable passed to it, then work out how to pass this variable around various pages (post/get). I am very inexperienced with javascript and it drives me mad that the script literally does nothing rather than throwing up an error (as in PHP) but this is what I have so far in terms of a function:
I have been trying to do some tooltips for a website and desperately wanted to learn something new and do that with jQuery.However, every time a mouse hovers over a tooltip, all hidden divs are shown, not just the one that supposed to. Here's my html:
I'm looking for some javascript to work with wordpress (jQuery preferrably) that will show/hide multiple divs on one click.
I had one working but it was kinda janky because it was causing me to have two divs with the same ID on one page. No good.
Since I updated to wp2.8.3 prior to launch, it's not working. So I've decided to just try and do it right.
Here's a page: [URL]
So, what I want to happen: On page load, the first tab: "general" and it's corresponding div beneath should be showing. And the first image should be showing. The other content divs and images should be hidden. I've given the text content divs a dashed border to show their borders. When a visitor clicks "dine at home" the general div and image hide, the second content div shows, as does the second image (it's currently the identical image, but the client may change later.) Etc.
I'll be using this function on a few other pages as well.
how to adjust this javascript to work on two different IDs at once?