asked on

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'
});

TheAvenger

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

surework1

ASKER

Hello TheAvenger,

no, it does not work.

have u tested the code on your side?

TheAvenger

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")

surework1

ASKER

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.

SOLUTION

TheAvenger

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

surework1

ASKER

Hello Tagit

thanks for the link, i will look into it now

TheAvenger

Did you succeed to run the example I sent you? Or do you need some support on that?

surework1

ASKER

Hello TheAvenger,

how do i put your script into the js file?

how do i call up your script from the js file?

TheAvenger

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.

surework1

ASKER

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>

Julian Hansen

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

surework1

ASKER

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'
});
});

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

surework1

ASKER

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.

Julian Hansen

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.