|
JavaScript - Does Anyone Know What Style Of Jquery This Is?
Hi all,
On this page http://piximory.com/templates/locus/dark/bg2.html if you click the portfolio link in main nav you are presented with the various thumbnail images for the projects, if you select a category the thumbnails organise themselves using jquery, does anyone know what type of jquery style this is? Thanks in advance! Kyle Similar Tutorialson my website: http://www.mypubspace.com/default.php I am using the buttons from JQuery UI, as you can see on the example: http://jqueryui.com/themeroller/ there is a rollover effect on the button but not on my website?! Hi, I've been playing around trying to recreate the way in which jQuery chains it's functions for it's "select" then "do" behaviour. Note: I don't want to chain functions with jQuery, I want to chain them like jQuery. So based on the jQuery code what I have so far is (doesn't work in IE): Code: var x = function(string) {
return new x.fn.init(string);
};
x.fn = x.prototype = {
message: '',
init: function(string) {
x.fn.message = string;
},
log: function() {
console.log(x.fn.message);
}
};
x.fn.init.prototype = x.fn;
var start = function() {
x('hello world').log();
};
document.addEventListener('DOMContentLoaded', start, false);
The code works but when I watch '$' in jQuery "fn" & "prototype" show up as being "jQuery()" but in my code when I watch "x": "fn" and "prototype" are both shown as objects containing "message", "init" and "log" and in both cases "init" contains "prototype" which contains my three functions again and the nesting continues seemingly infinitely... I'm clearly missing something here. What are they doing in differently in jQuery to prevent this endless nesting loop? 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 if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg Code: <html>
<head>
<title>expandable text area</title>
<style type="text/css">
#expandable{
height: 100px;
}
</style>
</head>
<body>
<form>
<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
document.getElementById('expandable').addEventListener('click',function(){
if(!this.style.height){
this.style.height = this.scrollHeight+'px';
}
alert(this.style.height);
}, true);
</script>
</html>
In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element 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". Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
Hi, I am trying to remove the padding-bottom from the last 2 <li> in my page using JQuery, here is the code I have written so far: Code: <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("#content .photos li").eq(-2).css("padding-bottom", "0px");
</script>
hi internet! I got a problem here, there are three 'onmouseover' event, in the first, I put the style in the inline,it works; but the others don't work when use css. how to get it work without inline style ? Quote: <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div{width: 100px; height: 30px;margin-bottom: 20px;} .blue{background:blue;} .green{background:green;} </style> </head> <script type="text/javascript" > function tdcc(tdcolor){ document.getElementById("x").style.color=tdcolor.style.backgroundColor; } </script> </head> <body> <div style="background:red;" onmouseover="tdcc(this)"></div> <div class="blue" onmouseover="tdcc(this)"></div> <div class="green" onmouseover="tdcc(this)"></div> <br /><br /> <textarea id="x">sdfsdgsdfsdfsdsdfdsfsdfsdf</textarea> </body> </html> hello, I need some help. I created a table that has some drop down boxes and based on the user selection it will show the text on the bottom, the plain drop down box has (nomal/bold/italic/bold-italic) the large drop down box has (large/medium/small) can someone please guide me or provide me a little demo on how to get this working?> thanks Hi im a newbie to java so please don't laugh. And apologies in advance for my English. When i open my page the src of the iframe is home.html. Home.html is empty and its in the way of the interface of my .swf file. My swf triggers the iframe to change into 50 different URL. So at the beginning the iframe should be gone. But whenever the src changes it should come back. I tried it by changing the height of the iframe. But nothing changes. here is a preview http://boyswithbeards.net/xrc/pres/ I have something like this. <iframe name="MoinkOriginal" id="MoinkOriginal" src="home.html" frameborder="0" scrolling="auto"></iframe> <script type = "text/javascript"> var iframe = document.getElementById('MoinkOriginal'); if (src='home.html') { var iframeElement = parent.document.getElementById('MoinkOriginal'); iframeElement.style.height = "0px"; // or use px iframeElement.style.width = "500px"; // or use px iframeElement.style.marginHeight = "-563px"; // or use px iframeElement.style.marginLeft = "750px"; // or use px } else { var iframeElement = parent.document.getElementById('MoinkOriginal'); iframeElement.style.height = "300px"; iframeElement.style.width = "500px"; iframeElement.style.marginHeight = "-563px"; // or use px iframeElement.style.marginLeft = "750px"; // or use px } </script> Thank you for helping me. Im stuck on this for days. May I put some style to an alert box ? for example . <html> <head> <style> #box { font-style: strong } </style> <script lenguaje="javascript"> var age; age = prompt("Type age : ", ""); if (edad<18) { <div id=box alert("Underage, get out !")> </div> } else { alert("You are Welcome, surf it it"); } </script> </head> </html> Thanks Hi All, I'm using the following code to (try to) update the style of an element in javascript. As you'll no doubt gather from the code, I'm trying to edit the opacity of the element. This code executes fine in FF, Opera and Chrome. However, Internet explorer keeps responding with 'style is null or not an object'. Basically, I don't think it's returning the correct element from the DOM, or, for that matter, any element. To add some more specific guidance, on the homepage I call launch_randomise() in the onload method, which, after 5 seconds, calls randomise_bottom_images() which calls itself and the bottom image regeneration function every 5 seconds, ensuring the images are regenerated every five seconds. Regenerating the bottom images is a three-step process: 1, fade out, 2 switch innerHTML, 3, fade back in. My functions for altering the opacity or innerHTML quite obviously rely on being able to talk about a DOM object, I know no other way of achieving this. I tried straight out getElementById but this doesn't seem to work in IE8, fine in FF, Op, GC. So, after much googling I replaced getElementById(string) with my own getElement(string). However, this still doesn't work. Any thoughts? Any help would be much appreciated!! Getting elements/setting style functions Code: function getElement(id, type)
{
var inputs = document.getElementsByTagName(type);
var descField = null;
for(var i=0;i<inputs.length;i++)
{
if(inputs.item(i).getAttribute('id') == id )
{
descField = inputs.item(i);
break;
}
}
return descField;
}
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setStyleById(i, p, v) {
//var n = document.getElementById(i);
var n = getElement(i, 'div');
n.style[p] = v;
}
Full Code: Code:
function getElement(id, type)
{
var inputs = document.getElementsByTagName(type);
var descField = null;
for(var i=0;i<inputs.length;i++)
{
if(inputs.item(i).getAttribute('id') == id )
{
descField = inputs.item(i);
break;
}
}
return descField;
}
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setStyleById(i, p, v) {
//var n = document.getElementById(i);
var n = getElement(i, 'div');
n.style[p] = v;
}
function replace_html(el, html) {
if( el ) {
oldEl = (typeof el === "string" ? document.getElementById(el) : el);
newEl = document.createElement(oldEl.nodeName);
// Preserve any properties we care about (id and class in this example)
newEl.id = oldEl.id;
newEl.className = oldEl.className;
//alert(newEl.id);
//set the new HTML and insert back into the DOM
newEl.innerHTML = html;
// alert(newEl.innerHTML);
if(oldEl.parentNode)
oldEl.parentNode.replaceChild(newEl, oldEl);
else
oldEl.innerHTML = html;
//return a reference to the new element in case we need it
return newEl;
}
};
function populate_array()
{
// this function's sole job is to populate the array of items to be used.
var da = new Array(8);
da[0] = new Array(3);
da[0][0] = "portfolio/garage_conversion_before.jpg";
da[0][1] = "portfolio/garage_into_kitchen.jpg";
da[0][2] = "pfimage1";
da[1] = new Array(3);
da[1][0] = "portfolio/refurb_old.jpg";
da[1][1] = "portfolio/refurb_new.jpg";
da[1][2] = "pfimage2";
da[2] = new Array(3);
da[2][0] = "portfolio/fireplace_old.jpg";
da[2][1] = "portfolio/fireplace_new.jpg";
da[2][2] = "pfimage3";
da[3] = new Array(3);
da[3][0] = "portfolio/bathroom1_old.jpg";
da[3][1] = "portfolio/bathroom1_new.jpg";
da[3][2] = "pfimage4";
da[4] = new Array(3);
da[4][0] = "portfolio/kitchen1_old.jpg";
da[4][1] = "portfolio/kitchen1_new.jpg";
da[4][2] = "pfimage5";
da[5] = new Array(3);
da[5][0] = "portfolio/bathroom2_old.jpg";
da[5][1] = "portfolio/bathroom2_new.jpg";
da[5][2] = "pfimage6";
da[6] = new Array(3);
da[6][0] = "portfolio/bathroom3_old.jpg";
da[6][1] = "portfolio/bathroom3_new.jpg";
da[6][2] = "pfimage7";
da[7] = new Array(3);
da[7][0] = "portfolio/ext1_old.jpg";
da[7][1] = "portfolio/ext1_new.jpg";
da[7][2] = "pfimage8";
return da;
}
function switchimage(folioItemNum, ImageState)
{
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}
// folioItemNum tells us which folio item to access,
// ImageState tells us which image to set.
// we will use ajax/dom to re-write the document.
var OldImageState = 1 - ImageState;
// 2d array of items.
var darray = populate_array();
// take one item and fade out
opacity(darray[folioItemNum][2], 100, 0, 500);
// re-arrange.
// with time delay.
window.setTimeout(function (a,b,c,d,e){
var y = "<a href=\"" + c + "\" rel=\"lightbox[" + d + "]\" class=\"hiddenimg\"><img src=\"" + c + "\" class=\"folioimghidden\"/></a><a href=\"" + b + "\" rel=\"lightbox[" + d + "]\"><img src=\"" + b + "\" class=\"folioimg\"/></a>";
replace_html(e, y);
opacity(e, 0, 100, 500);
},500,document.getElementById(darray[folioItemNum][2]),darray[folioItemNum][ImageState],darray[folioItemNum][OldImageState],folioItemNum,darray[folioItemNum][2]);
// done.
}
function regenbottomimgs()
{
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}
var array = Array(3);
array[0] = -1;
array[1] = -1;
array[2] = -1;
array[0] = get_unique_random_int(6, array, 3);
array[1] = get_unique_random_int(6, array, 3);
array[2] = get_unique_random_int(6, array, 3);
var darray = populate_array();
var imgstr = "<img src=\"" + darray[array[0]][1] + "\" class=\"scaleddown1\" /><img src=\"" + darray[array[1]][1] + "\" class=\"scaleddown2\" /><img src=\"" + darray[array[2]][1] + "\" class=\"scaleddown2\" />";
opacity("bottomimgs", 100, 0, 500);
window.setTimeout(function (a,b){
var x = replace_html(b, a);
opacity(b, 0, 100, 500);
},500,imgstr,"bottomimgs");
}
function get_random_int(Max)
{
var randomnumber = Math.round( Math.random() * Max );
return randomnumber;
}
function get_unique_random_int(Max, List, List_Length)
{
var stop = 1
var esc = 0
var x = 0;
var i = 0;
while ( stop == 1 )
{
esc = 0;
x = get_random_int(Max);
for ( i = 0; i < List_Length; i++ )
{
if ( x == List[i] )
{
esc = 1;
break;
}
}
if ( esc == 0 )
{
stop = 0;
}
}
return x;
}
function randomise_bottom_images()
{
regenbottomimgs();
setTimeout("randomise_bottom_images()",5000);
}
function launch_randomise()
{
setTimeout("randomise_bottom_images()", 5000);
}
function switchallnew()
{
switchimage(0,1);
switchimage(1,1);
switchimage(2,1);
switchimage(3,1);
switchimage(4,1);
switchimage(5,1);
switchimage(6,1);
switchimage(7,1);
}
function opacity(id, opacStart, opacEnd, millisec)
{
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if( opacStart > opacEnd )
{
for(i = opacStart; i >= opacEnd; i--) {
setTimeout(function (opacity, id) {
setStyleById(id, "opacity", (opacity / 100));
setStyleById(id, "MozOpacity", (opacity / 100));
setStyleById(id, "KhtmlOpacity", (opacity / 100));
setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
},(timer * speed), i, id);
timer++;
}
}
else if(opacStart < opacEnd)
{
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout(function (opacity, id) {
setStyleById(id, "opacity", (opacity / 100));
setStyleById(id, "MozOpacity", (opacity / 100));
setStyleById(id, "KhtmlOpacity", (opacity / 100));
setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
},(timer * speed), i, id);
timer++;
}
}
}
Thanks, A. I need to write a script that will search for a style attribute that matches "top: 10px;". If a match is found, it will then edit the value of that input box to "hello". So for example a webpage has: Code: <input style="top: 1px;" maxlength="20" type="text"> <input style="top: 100px;" maxlength="20" type="text"> <input style="top: 10px;" maxlength="20" type="text"> The script would edit the value of the 3rd one to "hello". I'm a beginner to javascript so my code may not make sense but bear with me please. Code: var styles = document.getElementsByTagName("input").attributes.getNamedItem("Style")
for (var i = 0; i < styles.length; ++i){
if (styles.value == "top: 179px; left: 348px; width: 222px;"){styles.value="hello"}
}
I am struggeling to get this to work in both IE, Firefox and Opera. I have an ajax application that changes the tr row bgcolor if the row is clicked and thereby item is added successfully to another items-list. My problem is to determine if the bg-color has changed or not, if it has changed, do not append the ordinary bgcolor on onmouseout and do not change color if you roll mouse over the row after this is done. The following is my problem: Code: // $bgfarve is the default row color // this works in IE and Opera but not in Firefox style="background-color: $bgfarve;" onmouseout="javascript: if(this.style.backgroundColor!='#ccff66')this.style.backgroundColor='$bgfarve';" onmouseover="javascript: if(this.style.backgroundColor!='#ccff66')this.style.backgroundColor='#dddddd';" // this works in Firefox but not the others style="background-color: $bgfarve;" onmouseout="javascript: if(this.style.backgroundColor!='rgb(204, 255, 102)')this.style.backgroundColor='$bgfarve';" onmouseover="javascript: if(this.style.backgroundColor!='rgb(204, 255, 102)')this.style.backgroundColor='#dddddd';" I had one solution working by setting ordinary bg and onmouseover colors on the tbody tag, and the chart was setting tr-color - but IE was very very very slow on that. Any ideas ? Anyone ? Hello guys I have a questions: How can I use javascript to change the CSS the page uses? I'm a noob to javascript so please help me out =D Regards, Thunderofnl I have several checkboxes with labels, all laid out in a table. All of the checkboxes have a class of "hide" and through CSS I have them hidden. Then with javascript it's set up so that when a user clicks on the label for the checkbox the background of the TD that contains it changes colors to indicate that that item is selected. Works great except for those browsers that have javascript disabled. Then the form is useless. I'm thinking now it would be better to use javascript to apply the "hide" class to the checkboxes. That way if it's disabled then the checkboxes will still be visible and the form useable. I'm just not sure how to go about doing that (not much of a javascript ninja). Can anyone advise me on how to do that? I'd really appreciate the help! Thanks! how can i get the number values from style atrributes. currently i have test_tree.style.top which would return 50px instead of 50, is there anyway i can take just the 50 as an integer
|
|||||||