I find I often have to change links in templates. I work for someone who is always wanting to alter their links. Is it possible to create a global template, or "master document" to link to as you would in a style sheet? This is what I want to do: Have 1 document that contains links. When I make changes to this document, all links on all pages would change also.
View 5 RepliesIs it possible to do something like this: On a site there is a link that says "Darken Page".Upon clicking the link, the background color turns black.The link then changes to "Brighten things up"So just a style sheet switcher, but with one link and changes
View 2 Replies View RelatedI have around thirty divs inside a master div. These divs contain each one a dot image of a dotted line. I want to create an animation with this dots so each one will set its opacity from 0 to 1 a tenth of a second one after the other. I know this should be very simple to do with a loop but I don't know how to loop through the divs inside a master div.I have a few lines of code from jquery to set opacity but other than that I dont know how to do what I want.
Code:
$(document).ready(function(){
$(".div1").animate({opacity: "-400"}, 1)
.animate({opacity: "0.01"}, 1000)
[code]....
I'm writing a reusable JavaScript library which needs to set certain styles in a document. The document may have an existing stylesheet definition either by a link or by an existing stylesheet declaration in the documents head section.
How can I use JavaScript to append my own style sheet information to a possibly already existing stylesheet definition?
It seems it's impossible to get a css style position from an external style sheet with JS, no?
<p id="testParagraph"></p>
if external css was:
p {
position: relative;
left: 20px;
}
apparently js cannot get
document.getElementById("testParagraph").style.left;
It seems it must be set as an inline css in the html or set by js explicitly in order to return the value. I don't get WHY it doesn't work.
how can i use javascript to detect the current date to select css style
sheet so that the color style of the site is different every day like
wired dot c0m?
I have a script that works perfectly on a live site that basically has a menu that reveals a hidden DIV and when you click a link, and then when you click a new link it hides the previous div and reaveals the new one. It is as follows:
Javascript Code:
Original - javascript Code
LastLayer = "nothing"; // the first div/layer
function openObject(theLayer){
// pass the name of the layer you want to bring to the top
// Then hide the last layer, and make the layer passed visible. This could have been done using the z-index property
if (document.getElementById) { // if it's IE5 or NS6 use this syntax to access the visiblity attribute
eval("document.getElementById(LastLayer).style.visibility = 'hidden'")
eval("document.getElementById(theLayer).style.visibility = 'visible'")
LastLayer = theLayer;
}
if(document.layers) { // if it's NS4 use this syntax to access the visiblity attribute
eval('document.layers[LastLayer].visibility = "hidden"')
eval('document.layers[theLayer].visibility = "visible"')
LastLayer = theLayer;
} .....
Now I am redesigning the site to work with a new style sheet, (There wasn't one before, it was all inline styles. Anyway, it broke my script. The CSS has a class that gives certain DIV's visibility attribute the 'hidden' value by default. I was planning on using the above script to reveal/hide them, but it does nothing. Here is the CSS that affects the divs I am referring to.
CSS Code:
Original - css Code
.job {
border: thin solid #000000;
float: right;
margin-right: 25px;
padding-left: 10px;
width: 40%;
display: none;
}
.job { border: thin solid #000000; float: right; margin-right: 25px; padding-left: 10px; width: 40%; display: none;}
As you can see there is nothing fancy in the css that would cause any concern.
I would like to create a function that will change the colour of a button when clicked then change it back at the end of the function. It works by capturing the backgroun color an then storing it as a variable. However it refuses to capture the original background color if the style is set via an external CSS style sheet. It only works if i set the style via the element markup. Am i doing something wrong and is there any way of capturing the style set by a external stylesheet?
Code:
function myFunction(el)
{
[code]....
I have found a solution for showing an element on page load (it should be hidden if JS is blocked), but the CSS and the JS go into the <head>. I prefer to keep all such code in external files, so how do I adapt it to support that approach? Found code is as follows (if it can be improved on, feel free to say so):
Code:
<script type="text/javascript">
document.write('<style type="text/css">#myDiv {display: block;}</style>');
</script>
I am using the stylesheet switcher on dynamic drive . Is there a way to change stylesheets based on a querystring parameter? Basically, if the query string includes "&StyleSheet=BlueStyle" then call and set the BlueStyle.css and cookie on page load.
View 2 Replies View Relatedi've designed a site using firefox as my primary browser. (note: i'm on an old mac so limited to only what i can run on 10.2.8) i tweaked it for safari, and then took the stuff on a jump drive to the library and tweaked it for IE6 on a pc.
what i need to do now is either hack the CSS for safari and ie (and eventually others once i get some feedback); or, use javascript to load the correct style sheet.
i've just spent two days--thursday and today since since 10 a.m.--trying to figure out first the js, and then the hack methods to no avail. (well, more, really over the past few weeks, but the two-day immersion has me totally fried.)
i'm reached the point where time is extremely critical. once i get this out in an acceptable form, i can spend more time on the learning curve.
here is the document head code:
I thought I'd try to begin with the accordion and tab, but I have had no success yet. I must be missing something simple. Here is the first test page:[code]Instead of getting tabs, I get my pages (generated by cgi perl scripts) displayed in tiny little scrollboxes at the top left.Equally bad, Firefox is telling me, in the error console, that jQuery.Tabs is undefined.FireFox doesn't like the filter and zoom properties in your style sheet.So, then, what do I need to do to get the tabs to work in the first instance. And then, how do I modify it to use an Accordion to display the same material. Are there any issues I need to be aware of when I start having my perl scripts (using predominantly the Perl packagesCGI and CGI::Session)create these pages?As far as possible, I am trying to keep this all valid HTML5, so that I can eventually make this interface mobile device friendly.
View 6 Replies View RelatedI would like to change the color of an external style sheet rule using .css method of jquery is this possible?
View 1 Replies View RelatedI need to know how to create an web template in Javascript or may be what is the simple way to create an Web template.I don't want to use dreamWeaver or other tools.I have watched some of the webpage and they are using Javascript to create an template.
View 1 Replies View RelatedI want my (IE) Intranet users to be able to create a new Word document
based on a specified template.
The following works, but I would like to be able to pass the filename
as a parameter, as there are often multiple documents on the same page:
---------------Script Code Starts-------------
<script lang="Javascript1.2">
function NewDoc()
{
var oShell
oShell = new ActiveXObject ("WScript.Shell");
oShell.Run('cmd /K "C:Test.dot"', 0, false);
window.event.cancelBubble = true;
return false;
}
</script>
---------------Script Code Ends-------------
---------------Link Code Starts-------------
<a href=":" onclick="return NewDoc()">Create a new document based on
C:Test.dot</a>
---------------Link Code Ends--------------
I know to specify the document template name as follows:
---------------Link Code Starts-------------
<a href=":" onclick="return NewDoc('C:Test.dot')">Create a new
document based on C:Test.dot</a>
---------------Link Code Ends--------------
And change the "Function NewDoc()" in the script code to line to
"Function NewDoc(TemplateName)". The problem is that I don't know what
syntax to use to parametise the
"oShell.Run('cmd /K "C:Test.dot"', 0, false);"
line.
I have been working on a function which makes it easier for me to pull
variables from the URL. So far I have:
<script language="JavaScript">
var variablesInUrl;
var vArray = new Array();
function loadUrlVariables()
{
varString = location.search;
//removes ? from varString
varString = varString.substring(1,varString.length);
//split into array containing variable=value
variableArray = varString.split('&');
variablesInUrl = variableArray.length-1
for (i=0; i<= variablesInUrl ; i++)
{ ....
I have a little JS app that is a glorified calculator which I posted the code for below. My code uses the document object to replace the html in the "content" <div> and works great.However, I want to add an inline style in order to change the background of the input (readonly field with an id of "coutput") based on either of the global variables named "MJPD" or "IJPD", (depending on the switch case selected in the user prompt at the beginning of the script.)Simplified....if the value of MJPD is less than 4.6, I want the "coutput" field's background to be red, else be green.The same goes for IJPD, except the threshold for red will be <3.83.Code and what I have tried is below.
<script language="JavaScript">
var MJPD = 1;
var IJPD = 1;
[code].....
I am trying to create a new global variable in a function with a custom name. I need something like this:
function newVariable(name){
createVariableWithName(name);
}
Is there any way at all to create a new template object that inherits from the built in Date object so as to be able to add new methods to that child object without adding them to the built in Date object? I've tried everything I can think of and as far as I can tell it keeps referencing the Date function instead of the Date object and so doesn't work.
View 3 Replies View RelatedI tried creating a global function to calculate the distance between 2 points.
jQuery.distance(p1, p2){
var dx = p2.x - p1.x;
var dy = p2.y - p1.y;
return Math.sqrt(dx^2 + dy^2);
};
Somewhere else within my code, I declare a new variable in order to store the value returned by the distance function.
var distance = $.distance(particle1, particle2);
However this is not working.
It's possible to style document.body not to start at 0,0 for example: body {width: 1000px; margin-left: auto; margin-right: auto;} This means that X/Y of the body is not 0,0 but how can I find out what the position is using javascript? document.body.offsetLeft; is 0 and offsetParent is null yet if I position something absolutely at 0,0 it goes to 0,0 of the window, not the body!
View 2 Replies View RelatedI have files on the server: .txt, .xml, .config, and "no extension" - all editable with notepad.
User will write some input, it will be added to file in specific place.
I need an ability to change element value in file (in one of them - depends what user choose) (or it even can be some trigger word it-self like CHANGE_ME for not to use attributes)
Create a temporary copy of edited file and create a unique temporary link to it.
I don't know what to start from.... For now I know how to make XHR, but what to do with other extensions?
Have no idea how to save the NEW file (a copy of original file) on server , and create a UNIQUE link ,and delete the file right after it was downloaded.
I can find a specific word in xml file, but how to change it?[code]...
Through an onClick() event, I have an inline function to change the
font size of the page (actually, I need to do this for the entire
website). I have this defined in the header.cfm file as:
onclick="document.body.style.fontSize=཮%'"
This does not work at all for some reason. Whereas,
onclick="document.body.style.backgroundColor='green'"
works. I am not able to understand why this is happening.
I have a class 'main_container' In CSS, i have defined width for the class
.main_container
{
width: 900px;
...
}
When i do:
[Code]...
for some stupid reason this is nog working:
Code:
<script type="text/javascript">
document.getElementById('tour').style.display='none';
[code].....
I have a master external CSS file for the styling of my website's pages.
I also want to incorporate a master javascript menu file that houses the left hand vertical menu bar for all my pages so that I can make changes to the menu in one location and have it instantly reflected across all pages.
Currently my menu is all standard html like the following:
This HTML is on every single page that has a menu and I want to move it to a master file where it is linked to each page - I don't want to use Server Side includes - this must be on the client side.
I was also thinking of putting the file in a jquery file and using $.get(). I'm not sure how the menu code would look in javascript or jquery - I am new to both.