Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 839
  • Last Modified:

Dynamic CSS jquery

Hello,

this is the contents of my template.css
.trydemobuttonspacing a{
    margin-top: 10px;
    margin-right: 10px;
}

i would like to dymically change the css file using jquery. what should i replace in the '???'
thank you

test.html:-
$('???').css({
   'margin-top':'3px',
   'margin-right':'30px'
});
0
surework1
Asked:
surework1
  • 7
  • 5
  • 3
  • +1
3 Solutions
 
TheAvengerCommented:
$(".trydemobuttonspacing").find("a").css({
   'margin-top':'3px',
   'margin-right':'30px'
});
0
 
surework1Author Commented:
Hello TheAvenger,

no, it does not work.

have u tested the code on your side?
0
 
TheAvengerCommented:
Yes, I tested the selector and it works. I don't know about the .css part but if you replace it with .text it works, like this:

$(".trydemobuttonspacing").find("a").text("some new text on the link")
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
surework1Author Commented:
Hello TheAvenger,

your code
$(".trydemobuttonspacing").find("a").text("some new text on the link")
is not complete. i don't actually understand what u meant.

pls attached the source file so that i can have a better understanding
thank you.
0
 
TheAvengerCommented:
Here is a fully working example:
<html>
<head>
<style type="text/css">
.trydemobuttonspacing a{
    margin-top: 10px;
    margin-right: 10px;
	background-color: red;
	position: absolute;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
		$(document).ready(function () {
			try {
				$(".trydemobuttonspacing").find("a")
					//.text("some new text on the link") 
					.css({
						'background-color' : 'yellow',
						'color' : 'red',
						'margin-top' : '300px',
						'margin-right' : '30px'
					});
			} catch (ex) {
				alert(ex);
			}
		});
  </script>
  
</head>
<body>
<div class="trydemobuttonspacing">
<a href="http://www.google.com">Some text</a>
</div>
</body>
</html>

Open in new window

0
 
RobOwner (Aidellio)Commented:
you can test it here: http://jsfiddle.net/Fw4Tc/
0
 
surework1Author Commented:
Hello Tagit

thanks for the link, i will look into it now
0
 
TheAvengerCommented:
Did you succeed to run the example I sent you? Or do you need some support on that?
0
 
surework1Author Commented:
Hello  TheAvenger,

how do i put your script into the js file?

how do i call up your script from the js file?
0
 
TheAvengerCommented:
This is an HTML file which contains all the needed parts: CSS, JS, etc. If you need to move it in a JS file, you should only copy the part between <script> and </script> and link the file. For more info you can google separate javascript files and you will find millions of examples.
0
 
surework1Author Commented:
Hello TheAvenger,

I'd went to google and type "how to call jquery function from js file", i can find tons of answers but it seems like none of the answer is enlightening me. I'd spent hours figuring how to calling up the function but keep getting error. are u able to help please?

test.css
.trydemobuttonspacing a {
      float: right;
      display: block;
      margin-right: 100px;
}


test.js
$(document).ready(function () {
      try {
            $(".trydemobuttonspacing").find("a")
            //.text("some new text on the link")
            .css({
                  'margin-top' : '3px',
                  'margin-right' : '0px'
            });
      } catch (ex) {
            alert(ex);
      }
});


test.html
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="test.js"></script>

</head>
<body>
<li class="trydemobuttonspacing">Demo Programs<a href="http://www.test.com/Demo/" TARGET="_blank">Try Demo</a></li>

*** i would like to call up the the js function here to reposition the "try demo"

</body>
</html>
0
 
Julian HansenCommented:
When do you want the css to change?

BTW you don't need to use find you can just do the following

$(".trydemobuttonspacing a").css({
   'margin-top':'3px',
   'margin-right':'30px'
}); 

Open in new window


I am assuming you would want this to happen on some event. If you want it to run when the page loads then do like this
I have put in the script to load JQuery - if you are already loading the JQuery liberary then remove the first line of the script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".trydemobuttonspacing a").css({
     'margin-top':'3px',
     'margin-right':'30px'
  }); 
});
</script>

Open in new window

If you want to to fire on an event - say a mouse click then
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#someelementid').click(function(e) {
    e.preventDefault(); // If a button or a element and you don't it to submit or go to new page.
    $(".trydemobuttonspacing a").css({
       'margin-top':'3px',
       'margin-right':'30px'
    }); 
  });
});
</script>

Open in new window

0
 
surework1Author Commented:
Hello JulianH

is it possible to place these statements in a js and call up the function from the html file?

$(function() {
  $(".trydemobuttonspacing a").css({
     'margin-top':'3px',
     'margin-right':'30px'
  });
});
0
 
Julian HansenCommented:
Yes - you can put them in a .js file and include that in the .html

<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
</body>
</html>

Open in new window

Sample.js file
$(function() {
  $(".trydemobuttonspacing a").css({
     'margin-top':'3px',
     'margin-right':'30px'
  });
}); 

Open in new window

0
 
surework1Author Commented:
Hello JulianH

I had made all the necessary consolidation

test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="test.js"></script>

</head>
<body>
<div class="box1">
<ul>
<li class="trydemobuttonspacing">Demo Program<a href="http://www.test.com/demo/" TARGET="_blank" class="button1 blue small">Try Demo</a></li>
<li class="trydemobuttonspacing2">Demo Program<a href="http://www.test.com/demo/" TARGET="_blank" class="button1 blue small">Try Demo</a></li>
</ul>
</div>
</body>
</html>

Open in new window


test.css
.trydemobuttonspacing a {
	position:absolute;
	line-height: 15px;
	/* margin: top right bottom left */	
	margin:3px 11px;
}

.trydemobuttonspacing2 a {
	float:right;
	position:relative;
	line-height: 15px;
	/* margin: top right bottom left */	
	margin:3px 11px;
}

.box1{
	float:left;
	width:350px;
	border-left:1px solid #e4e7eb;
}

.box1 ul{
	margin:0;
	padding:0;
}

.box1 ul li{
	list-style:none;
	font-size:14px;
	line-height:31px;
	padding-left:20px;
	border-top:1px solid #fff;	
	border-bottom:1px solid #ccc;
	background-color:#EFEEDA;
}

.button1 {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-size:14px;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 5px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 5px 2px rgba(0,0,0,.2);
	box-shadow: 0 5px 2px rgba(0,0,0,.2);
}

.button1:hover {
	text-decoration: none;
}

.button1:active {
	position: relative;
	top: 1px;
}

.blue {
	background: #1177bd;
	border: solid 1px #f1f9ff;
	color:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#00cff0), to(#1177bd));
	background: -moz-linear-gradient(top,  #00cff0,  #1177bd);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00cff0', endColorstr='#1177bd');
}

.blue:hover {
	color: #fff;
	border: solid 1px #f1f9ff;
	background: #00cff0;
	background: -webkit-gradient(linear, left top, left bottom, from(#1177bd), to(#00cff0));
	background: -moz-linear-gradient(top,  #1177bd,  #00cff0);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#1177bd', endColorstr='#00cff0');
}

.blue:active {
	color:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#00cff0), to(#1177bd));
	background: -moz-linear-gradient(top,  #00cff0,  #1177bd);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00cff0', endColorstr='#1177bd');
}

.small {
     font-size: 11px;
     font-weight: bold;
     padding: 0.3em 0.75em;
}

Open in new window


test.js
$(document).ready(function () {
	try {
		$(".trydemobuttonspacing").find("a")
			//.text("some new text on the link") 
			.css({
			'position' : 'absolute',
			'margin-top' : '5px',
			'margin-right' : '10px'
			});
	} catch (ex) {
		alert(ex);
	}
});

Open in new window


My next question is in IE8, why the first Try Demo Blue Button has an additional vertical line on the right? where else the second button does not have. This only apply to IE8 but not firefox and chrome.

I don't think this is a bug of IE8.

Thank you in advance.
0
 
Julian HansenCommented:
My next question is in IE8, why the first Try Demo Blue Button has an additional vertical line on the right

Has your first question been answered?

If so best to open another question for this one.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 7
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now