JavaScript - Jquery If/else And Variables - Add/remove Styling

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance

var s="attr"
var i=$(s)
// jQuery(elem).attr(attr,eval("elm"+attr));
jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this.

how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem".

Hi Guys

I am using a CMS where the blogging platform isn't the greatest.

Basically I am wanting to give the first post preview different styling to the rest of the post previews on the page.

Here is an example of what I am trying to achieve: http://www.stylingyou.com.au/
You can see the first post preview has a bg color and border etc.

So here is the code my CMS outputs for the blog previews
Code:

<div id="catblogoutput">
<div class="blog-post">
1st blog preview here
</div>
<div class="blog-post">
2nd blog preview here
</div>
<div class="blog-post">
3rd blog preview here
</div>
</div>

As you can see each div is named the same and I can not change this.

So I am thinking the JS would say something like:
if it is the first div blog-post then use this css class

Obviously I am no JS expert, so let me know if this is possible.

Thanks

Is there any way to use css to make a style for a javascript command such as document.write?

I want to be able to control its position, font, color, and size

I'm back from a web dev hiatus. I'm writing a new site but have found myself a bit rusty. I'm trying to change the visibility of an element with no luck. nothing happens. I'll supply the code. Don't lick the kitten. My js is external. Any non-condescending help is welcome.

html
Code:

    <div id="windows"><p>Windows</p>
        <a name="windowsitem">test1</a>
        <a>test2</a>
</div>

javascript a.k.a js (js stands for whispering ponies)
Code:

function filter()
{
    if ( windowscb.checked==1 )
        windowsitem.style.visibility='visible';
    else
        windowsitem.style.visibility='hidden';
}

If Ashton Kutcher is reading this, I should be married to Demi Moore. Not you!!

Hi,

I would like to change the style on my onclick on my radio buttons not sure why it's not working?!


PHP Code:
<div id="Available" <?php if($mondayamstart == "Unavailable"){ echo 'style="visibility:hidden!important;"';} else { echo 'style="visibility:visible!important;"';} ?>>
<select name="Monday_am_startH" id="Monday_am_startH">
<?php
for ($i=0; $i<24; $i++)
{
    if($i<10)
    {
        $i = sprintf("%02d",$i);
    }
    echo '<option'.($i==substr($mondayamstart,0,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>';
}
?>
</select>
:
<select name="Monday_am_startM" id="Monday_am_startM">
<?php
for ($i=0; $i<60; $i++)
{
    if($i<10)
    {
        $i = sprintf("%02d",$i);
    }
    echo '<option'.($i==substr($mondayamstart,3,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>';
}
?>
</select>
</div>
<div id="Unavailable">&nbsp;</div>
<br />
<input type="radio" name="Monday_am_startRad" value="AvailableMon" <?php if($mondayamstart != "Unavailable"){ echo "checked";} ?> onClick:"document.getElementByID('available').style.visibility:visible;'"> Available <br /><input type="radio" name="Monday_am_startRad" value="UnavailableMon" <?php if($mondayamstart == "Unavailable"){ echo "checked";} ?> onClick:"javascript'getElementByID('Unavailable')style.visibility:hidden;'"> Unavailable

Hi guys,


I am after a script which will has parametres to modify the select menu in webpages.

I have looked at niceforms http://www.emblematiq.com/lab/niceforms/demo/

However i dont know how to apply it.

Any tips would be much appreciated.

George

Hello Guys
I'm new to Javascript

I think that the way I have worded the title may be incorrect, as I've googled similar phrases without finding anything to help me

Anyway onto the issue

I have a dropdown menu
you can see it he
http://heavywoollen.webs.com

It's written in html & css, now I've had to put the code for the dropdown onto every page of the site, simply because at the time that was all i knew how to do, so I'm now trying to reduce it by writing it on JS and link the file into the page

so the issue/question

I have written the menu in JS, but my question is

How is it styled? or how is the css file appiled?

in the html I use < div id =" navMenu "> </div>
and in the css there is # navMenu

so I can understand how that works, but I can't figure out how to apply it into javascript,

I think simply because I don't know enough about JS to know what the link tag is, if it exists

at the moment the JS file simply reads link this
Code:

//Admin Options - open <ul>
document.write("<ul><li><a href=#>Admin</a><ul><li><a href=index.html>Home</a></li><li><a href=history.html>History</a></li></li><li><a href=constitution.html>Constitution</a></li><li><a href=Code of Conduct.html>Code of Conduct</a></li><li><a href=League Meetings.html>League Meetings</a></li><li><a href=Club Contacts.html>Contacts</a></li><li><a href=League Officials.html>League Officials</a>  </li><li><a href=League Policy.html>Policy</a>  </li><li><a href=Duty of Care.html>Duty of Care</a>  </li><li><a href=Helmets.html>Helmets</a>  </li><li><a href=Fielding Regulations.html>Fielding Regs</a>  </li><li><a href=Fast Bowling.html>Fast Bowling</a>  </li><li><a href=Unfair Bowling.html>Unfair Bowling</a>  </li><li><a href=Umpires.html>Umpires</a>  </li><li><a href=Laws of Cricket.html>Cricket Law</a>  </li><li><a href=CRB.html>CRB Check </a>  </li></ul></li>");

//Clubs
document.write("<li><a href=#>Clubs</a><ul><li><a href=clubs-adwalton.html>Adwalton</a>  </li><li><a href=clubs-altofts.html>Altofts</a>  </li><li><a href=clubs-azaad.html>Azaad</a>  </li> <li><a href=clubs-batley.html>Batley</a>  </li><li><a href=clubs-birstall.html>Birstall</a>  </li><li><a href=clubs-brighouse.html>Brighouse</a>  </li><li><a href=clubs-carlton.html>Carlton</a>  </li><li><a href=clubs-cleckheaton.html>Cleckheaton</a>  </li><li><a href=clubs-driglington.html>Drighlington</a>  </li><li><a href=clubs-eastardsley.html>East Ardsley</a>  </li><li><a href=clubs-gildersome.html>Gildersome</a>  </li><li><a href=clubs-gomersal.html>Gomersal</a>  </li><li><a href=clubs-hangingheaton.html>Hanging Heaton</a>  </li><li><a href=clubs-hartsheadmoor.html>Hartshead Moor</a>  </li><li><a href=clubs-holmevalleygirls.html>Holme Valley Girls</a>  </li><li><a href=clubs-hunsletnelson.html>Hunslet Nelson</a>  </li><li><a href=clubs-liversedge.html>Liversedge</a>  </li><li><a href=clubs-methley.html>Methley</a>  </li><li><a href=clubs-mirfield.html>Mirfield</a>  </li><li><a href=clubs-mirfieldpc.html>Mirfield PC</a>  </li><li><a href=clubs-moorlands.html>Moorlands</a>  </li><li><a href=clubs-morley.html>Morley</a>  </li><li><a href=clubs-newfarnley.html>New Farnley</a>  </li><li><a href=clubs-ossett.html>Ossett</a>  </li><li><a href=clubs-rothwell.html>Rothwell</a>  </li><li><a href=clubs-scholes.html>Scholes</a>  </li><li><a href=clubs-townville.html>Townville</a>  </li><li><a href=clubs-wakestmichs.html>Wake St Michaels</a>  </li><li><a href=clubs-wakethornes.html>Wakefield Thornes</a>  </li><li><a href=clubs-westbretton.html>West Bretton</a>  </li><li><a href=clubs-wrenthorpe.html>Wrenthorpe</a>  </li></ul></li>");

//League Tables & Fixtures
document.write("<li><a href=>Leagues</a><ul> <li><a href=fixtures.html>Fixtures/Results</a> </li><li><a href=leaguetables.html>Tables</a>  </li></ul></li>");

//Representative
document.write("<li><a href=#>Representative</a> <ul> <li><a href=lordtav-u11.html>Lord Taverners U11</a>  </li><li><a href=lordtav-u15.html>Lord Taverners U15</a>  </li><li><a href=coaching.html>Coaching</a>  </li><li><a href=teamwear.html>Team Wear</a>  </li></ul></li>");

//Links
document.write("<li><a href=#>Links</a> <ul><li><a href=http://www.ecb.co.uk/>ECB</a>  </li><li><a href=http://www.ecb.co.uk/development/ecb-coaches-association/>ECB CA</a>  </li><li><a href=http://www.yorkshirecb.com/>YCB</a>  </li><li><a href=http://www.yorkshirecricketboard.org.uk/index.php?option=com_content&view=article&id=103:yorkshire-senior-schools-cricket-association&catid=271:yssca&Itemid=49>YSCA</a>  </li><li><a href=http://www.yorkshirewca.co.uk/district.html>YWCA</a>  </li><li><a href=http://www.homeoffice.gov.uk/agencies-public-bodies/crb/>CRB</a>  </li></ul></li>");

//Photo Gallery  - closing </ul>                   
document.write("<li><a href=#>Other</a> <ul><li><a href=#>Photo Galllery</a>  </li><li><a href=#>Player Registration</a>  </li></ul></li></ul>");

Apologies if that is too much code for a post

so there is nothing else on the sheet
do I need to use a link tag?

How do i get the JS file to relate to the #navMenu of the css file?

Thanks

Rob

Hi, I'm not good with manipulating JavaScript for my needs and I am trying to use a JavaScript file to implement my common content in to my web page, in this case it is a news article I want to display across all of my web pages. The problem is that I want to style it and use html attributes in side of the document.write and that is apparently messing it up. Would someone be able to show me how to fix this problem or fix the code so I can get the common content to display correctly with styling from CSS. If possible I would like to keep the CSS in a separate file and put a link to it in the JavaScript file and use the class tags, but I do not know how far we can go with JavaScript.
Thanks for helping. Here are links to the webpage where I would like the code to show up. Below is the JavaScript that is currently in my .js file.

http://www.nasawear.com/Home.html (The news article should display in the right column.)


Code:

document.write("<link rel="stylesheet" type="text/css" href="css/mainpage.css" />");
document.write("<h3 class="section">");
document.write("New NASA News");
document.write("</h3>"); 
document.write("
<div class="picbox">
<a rel="nofollow" target="_blank" href="image/superhotplanet-full.jpg">
<img class="white" width="335" height="268" src="image/superhotplanet-full.jpg" alt="NASA Finds Super-Hot Planet with Unique Comet-Like Tail" /> Full Size</a>
<p class="imageandstuff">NASA Finds Super-Hot Planet with Unique Comet-Like Tail</p>
<p class="dis">
Astronomers using NASA's Hubble Space Telescope have confirmed the existence of a baked object that could be called a "cometary planet." The gas giant planet, named HD 209458b, is orbiting so close to its star that its heated atmosphere is escaping into space.
<br/>
<br/>
Observations taken with Hubble's Cosmic Origins Spectrograph (COS) suggest powerful stellar winds are sweeping the cast-off atmospheric material behind the scorched planet and shaping it into a comet-like tail.
<br/>
Illustration Credit: NASA, ESA, and G. Bacon (STScI)
</p>
</div> ");

Hey,

I have a page at http://www.webdev70.cocc-webdev.org/contact.html where I have styling on the radio and check boxes.

I'm working on another project for class now where I want onclick or onchange functions in the radio buttons. When the radio buttons have the class="styled" on them, the function will not execute. When that's removed, they do.

Here is the javascript for the styling:

Code:

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";


document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
	init: function() {
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;

				if(inputs[a].checked == true) {
					if(inputs[a].type == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				if(!inputs[a].getAttribute("disabled")) {
					span[a].onmousedown = Custom.pushed;
					span[a].onmouseup = Custom.check;
				} else {
					span[a].className = span[a].className += " disabled";
				}
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "styled") {
				option = inputs[a].getElementsByTagName("option");
				active = option[0].childNodes[0].nodeValue;
				textnode = document.createTextNode(active);
				for(b = 0; b < option.length; b++) {
					if(option[b].selected == true) {
						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
					}
				}
				span[a] = document.createElement("span");
				span[a].className = "select";
				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				if(!inputs[a].getAttribute("disabled")) {
					inputs[a].onchange = Custom.choose;
				} else {
					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
				}
			}
		}
		document.onmouseup = Custom.clear;
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else {
				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
}
window.onload = Custom.init;

The code is way over my head so I'm not sure where the problem is, or if it could be fixed.

This is what one of my radio buttons looks like:
<input type="radio" name="puppy" value="1" class="styled" onchange="puppycheck()">Black and White Puppy


If the style tag is removed it works perfectly. There is CSS too, but I don't think the problem is in there.

Is there a script that automatically applies two different styles to the first two lines of text in a container, without using CSS?

Example:

======
This Would be Line One as a Title with its Own Style
This would be line two as a byline with a separate style

This is the main text of the paragraph... etc etc.
======


Thanks for any help.

Steph

I'm trying to call a javascript function from within my swf and I'm having a couple of problems which are confussing me somewhat.

I'm using this to call the function from flash:

Code:

ExternalInterface.call("pgcover");

I know that this is calling the function as I have set it trigger an alert action and this comes up properly.

But I don't want the function to trigger an alert, this is just for testing purposes.

I instead want it to change the styling on a div.

I have set up a test page where I have asigned the function to a button and this works, the div display changes from block to none.

When I get the swf to call the function setup to do the same thing, nothing happens.

Code:

function pgcover() 
{ 
  document.getElementById("unlayout").style.display= "none";
}

My swf is embedded in the html page that the javascript is on, I have checked all code and have rulled out spelling mistakes etc.

Any help with this would be amazing as it is driving me crazy.