|
JavaScript - Programmatically Create Css Using Extjs (ext.util.css.createstylesheet)
I have the following code that use ExtJS (http://www.sencha.com/products/extjs/) to create CSS programmatically.
Code: <html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.3.1/release/ext-all.js">
<script type="text/javascript">
document.write("<div id=\"myClass0\"></div>");
Ext.onReady(function() {
alert("EXTJS READY!");
var styles = '';
for(var n = 0; n <= 100; n++){
styles += '#myClass' + n + '{' +
'background-image: url(http://www.google.de/images/firefox/spraycan_customize.png);' +
'}';
}
$("#myidd").text(styles);
Ext.util.CSS.createStyleSheet(styles, 'myId');
});
</script>
</html>
However, I don't get it why there is nothing being shown in my web browser. by right, there should be some picture being displayed on my web browser. Appreciate any help offer. Similar TutorialsI have a form inside an iFrame which I want to submit with javascript as the iFrame loads. For example: Code: <iframe src="......." name="myiframe" id="myiframe"> <form method="post" id="myform" name="myform" action="http:// www.yahoo.com" rel="nofollow" target="_self"> </form> </iframe> No matter how I try to submit the form I cannot get it. I have tried: document.getElementsByName("myform") document.myiframe.myform all other combinations I try gives the same, i cannot access the form. (The page inside the iFrame is from the same domain as the parent page, I am not trying to do any cross domain scripting) Can you please assist me getting this working ? Thanks! How to I create the following code... Code: #moving {
position:absolute;
float:right;
top:100px;
left:50px;
}
#movingword {
position:absolute;
float:right;
top:0px;
left:0px;
}
... and this code ... Code: <div id="movingword"> <font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font> </div> ... programmatically using Javascript? (I will need a X number of "movingwords" and "moving", where X is a number and examples are "movingwords0", "movingwords1", "movingwords2" ... movingwordsX) Here the full code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
position:relative;
}
#moving {
position:absolute;
float:right;
top:100px;
left:50px;
}
#movingword {
position:absolute;
float:right;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
var t=125;
var l=20;
$(document).ready(function() {
document.getElementById("movingword").style.top = t + "px";
document.getElementById("movingword").style.left = l + "px";
});
</script>
</head>
<body>
<font color=white><h1> Hello World </h1></font>
<div id="scenery">
<img src="http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg" alt="">
<div id="moving">
<img src="http://cdn1.iconfinder.com/data/icons/gloss-basic-icons-by-momentum/32/bullet-yellow.png" alt="">
</div>
<div id="movingword">
<font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font>
</div>
</div>
</body>
</html>
How can i create an image rotator just like in redtube.com. When mouseenter it changes the img's src. When mouseleave it returns the default src. Ps: sorry abou the website font.hehe I have a question, How do you create a slider for a website? I am not familiar with anything but html and css, but I would like to create a simple image slider for my site. How would I go about doing that? Any help is appreciated Thanks hello friends.. I am working on the html code in which i using the List Control The Requirement that among the List element in which I choose the locations there is option in which whenever i select the option None From The List then it should Disply the empty textbox So how the function is declared Please tell me... Hi all Not sure how to tackle this. I haven't done any DOM manipulation and this is a tag within a tag. Another thing is submit is Ajax and therefore can be hit many times --- so I guess I need to also check if element already exists. The result comes back from PHP and I think wipes out anything in the result area. I want to create this: Code: <span id="loading"><img src="loading.gif" /></span> Code: <div id="results">which should populate here</div>
<script type="text/javascript">
function loading(){
?
</script>
<input type="button" name="submit" id="submit" onclick="loading();"/>
How do I begin this? Help appreciated. LT oh this is my Ajax just in case what i'm trying to do should be done from here. Code: <script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function(){
//Get the values
var amount = $('#amount').val();
var from = $('#from').val();
var to = $('#to').val();
var params = "amount=" + amount + "&from=" + from + "&to=" + to;
$.ajax({
type: "POST",
url: "change.php",
data: params,
success: function(data){
$('#results').html(data).fadeIn("slow");
}
});
});
});
</script>
I am trying to create a basic javascript that shows milage between severag areas, similar to what you find on the rear road atlas. I have tried and failed to create anything, i just think i am total useless at understanding javascript. The basic concept is this image attached. There would be a drop down box that lists the destinations and another with the same but would be departure. When a person chooses example: Butte >>> Kalipsell it would show 238 and vice versa. it seems a simple thing to do but cant get my head around it all. Could someone create a simple script, say 3 destinations and i will fill the rest in and see if i can understand what i am doing and then ask for additional help if required? Hi I wanted to create multiple check box and once check box is clicked user should able to enter text and submit so i created this but when check box toggle it keep creating text areas. i wanted to create 1 text area per one check box also i need to store each text area value to data base. how can i correct this to achieve my needs PHP Code: <script type="text/javascript"> function validate(chk){ if (chk.checked == 1){ var htmlText = "<textarea name='area' cols='40' rows='5'></textarea>"; var newElement = document.createElement('div'); newElement.id = 'text'; newElement.innerHTML = htmlText; var fieldsArea = document.getElementById('text'); fieldsArea.appendChild(newElement); }else {} } </script> <form> <label>option1 <input type=checkbox name=chk1 onclick="return validate(chk1);"></label> <label>option2 <input type=checkbox name=chk2 onclick="return validate(chk2);"></label> </form> <div id="text"></div> Sorry for the language errors Regards. I have a select with a OnChange Function. I would like to know how to create a different object depending on the selection on the Select. Example: MySelect have Option 1 and Option 2, so If (Myselect.value == Option 1) {Create Object 1} If (Myselect.value == Option 2) {Create Object 2} I'm using the object under <body> and it's working, but when I'm trying to use it under a <script> does not work. This is the object I'm trying to create: (It is a map) so what I'm trying is to change the values or map depending on the selection of the Select. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="900" height="600" id="zoom_map" align="top"> <param name="movie" value="us_albers.swf?data_file=senate.xml" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <embed src="us_albers.swf?data_file=senate.xml" quality="high" bgcolor="#FFFFFF" width="100" height="100" name="Clickable U.S. Map" align="top" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object> Thank you very much I am not a JAVA programmer. However I expected to find a similar template on the web. I couldn't. A list of checkbox options: 1. Water 2. Sand 3. Red paint Submit button which brings results IF Water and Sand selected, result = Mud IF Water and Red paint selected, result = Red water The closest thing I got to was http://www.javaworld.com/javaworld/j...orm_check.html How would code for such a program look like? Ideally I would want it to be really simple. Paste to notepad and save as html. Hi, I'm quite new at Javascript and I'm trying to create a script that will save me a lot of time when creating my website. I'm gonna try to explain what I'm looking for by taking a simple example. I have a page 'Portfolio'. On this page I have thumbnails of my work. 'OnMouseOver' will have the bigger version of the image appear on the screen (no need for a click). The images are named 1001, 1002, 1003, etc. The thumbs are named 1001_th, 1002_th, etc. When I click on one of the thumbnails, I want the page "Details" to open, on which only the picture and the description is different for every project. The rest of the content will be the same every time. What I am trying to do is avoid having to create a page "Details" for each one of my projects (up to 100 and growing). I figure there must be a simple solution to 'take' the number of the picture and put it in a standard "Details" page. Any help on this will be much appreciated! Thanks, M. I am creating a new <button> this way: newBox = document.createElement("button"); newBox.setAttribute("class","custom"); newBox.innerHTML = "<span><span>" + element[j].getAttribute("value") + "</span></span>"; newBox.onmouseover = function() { this.setAttribute("class","custom customHover"); return false; } newBox.onmouseout = function() { this.setAttribute("class","custom"); return false; } newBox.onmousedown = function() { this.setAttribute("class","custom customClick"); return false; } newBox.onmouseup = function() { this.setAttribute("class","custom"); return false; } element[j].parentNode.insertBefore( newBox, element[j].nextSibling ); But I need to change the type of the button to "button". Every time I try to change the type to either "button" or "submit" my browser just freezes. but If I change the button type to reset it works fine. Is there another way to change the type other than button.type = "" and button.setAttribute("type","")? Hello, I want to create a page that allows the user to select 2 images as options, when they click one, a new page is dynamically loaded with a list of options they can choose again (like a sublevel of the image they clicked on). From there it will just continue moving down like a hierachy Can someone help me with the basic script forthis to work so i can mess with it and edit it to my needs ^ Thank you in advance hie everyone plz i want to know how to make tabs using javascript.... i want to make tabs like this website http://traveline.idea-sys.net/CSP/Default.aspx?A=2&P=50 --> (M/S Darakum - Description / GalleryDeck / Plan) can anyone help me plz? i am a new website owner . i am here to learn how to create mirrors to upload sites like this. uploadmirrors can you please explain how is it. i want to upload files into 3 hosting sites(depositfiles,filepost,fileserve) in single upload. please help me . how is it possible. Does anyone know of a way I can create an array using words on new lines, without quotes, or a way I can make all of the lines separately in quotes and separated by commas? (I have 118,628 words, so I can't do it by hand.) Any help is appreciated. Thanks to anyone who answers.
Hi, I have the following function to dynamically create an image (in this case a toolbox button): Code: function createButton(srcid,bttn)
{
if (bttn=='mag') {s='Magnify';h='Magnify';o='DoZoom(event,\'0\',\''+srcid+'\')';}
if (bttn=='frz') {s='Pause';h='Freeze/Unfreeze';o='setPicture(\''+srcid+'\',0)';}
if (bttn=='swp') {s='Swap';h='Swap maps';o='setPicture(\''+srcid+'\',2)';}
btn=document.createElement('img');
btn.setAttribute('src','toolbox/'+s+'.gif');
btn.setAttribute('width','16px');
btn.setAttribute('height','16px');
btn.setAttribute('id',bttn+'btn_'+srcid);
btn.setAttribute('class','button');
btn.setAttribute('name','Toolbox');
btn.setAttribute('title',h);
btn.setAttribute('onclick',o);
document.getElementById('ctrlDiv').appendChild(btn);
}
which works fine in IE8 and IE9, but in IE7 it refuses to pick up the style 'button'. I've even tried putting in btn.class='button' but JS throws up an error. If I specify the style by btn.style.position='Absolute' it picks this up OK. However, it won't respond to the onclick event either. I have heard that setAttribute is buggy with IE7, which is why I tried to specify each attribute directly. The style sheet for class button is: Code: .button
{
position: absolute;
left: 5;
top: 5;
z-index: 1;
}
(BTW, no link to a website as this is local on my machine atm) TIA, Gerald. Hi guys, Would really appreciate if someone could help me out. I'm not sure if this is the correct forum or it should be just CSS, but what I need to achieve is this - I've got a simple text link - "Add to favourites" When someone hovers over it, I'd like an instant small green box to drop down from it containing 3 other links/options - Add car only Add caravan only Add car and caravan If someone could help me out with this I'd be really appreciative, or point me at a tutorial or script (I'm still searching for one) Many thanks Tree Been looking around for 3 days now, I found exactly the style that I want, have images on my web site, all I need is for someone to show, explain to me how exactly this pagination or whatever it is works, how do i select which actual images from my site or where to be shown in the main window and also the thumbnails below???? as I said, I already know what kind of slide show I want, it's in this link the lower right version of slideshow with the pics of two horses and stuff: http://www.dynamicdrive.com/dynamici...tentslider.htm I already have the script on my site but but can't figure out how to place my images: http://www.vytasornamental.net/page2.html and I want THUMBNAILS on the bottom like in the first link.... not the text Hi, i have got this piece of code: Code: var f = [];
var x = 1;
f[0] = function(){alert(x);};
var x = 2;
f[1] = function(){alert(x);};
f[0]();
f[1]();
I would like to display the number 1 at first and then 2. but this code produces number 2 for both alerts. I was able to achieve what i want with "new" constructor when creating functions but this is not a good practice and after all i am passing these functions as an event handler and it cant be done with "new" keyword because it is throwing error. I think there are some solutions with arrays e.g the x would be an array of numbers, but i don't like it. Am i missing something important? Thanks for your replies. |
|||||||