Coding-Spot

You are not connected. Please login or register

Go to page : 1, 2  Next

 
 

add css on javascript

Message (Page 1 of 2)


 
Senior Member

Posted on Mon Aug 12, 2013 4:02 pm

 
hello bro mark, i want to learn Smile
how to merge javascript code with css?

i need  my  code for javascript add some class about css
example this code
Code:
       function text() {
        };
        text = new text();
        number = 0;
        // textArray
        text[number++] = "Random text string 1."
        text[number++] = "Random text string 2."
        text[number++] = "Random text string 3."
        text[number++] = "Random text string 4."
        text[number++] = "Random text string 5."
        // keep adding items here...
        increment = Math.floor(Math.random() * number);
        document.write(text[increment]);
        //-->
i need that code add some class about css, so can edit margin, font size, font color, pading and etc about css.

and i have this code to.
Code:
document.write("<style type='text/css'>body {CSS inside}</style>");
but I don't understand how that could be made ​​in a single code.
please teach me about javascript, mainly about merging the code. :)

i need you help me again, thanks a lot bro mark,  :D



Last edited by weeknight on Tue Aug 13, 2013 6:16 am; edited 1 time in total



View user profile



 
Advance Member

Posted on Mon Aug 12, 2013 10:49 pm

 
idk about the first one.. but ik about the second one
that was using the original js not using the jQuery i guess
so in jquery you can use $ or jQuery to defind the id/class/other REMEMBER : ID = # CLASS = .
example for $
Code:
$('#nathan');
and example for jquery
Code:
jQuery('#nathan');
the first one if you you to use things like .css
Code:
$('classname').css('css style name','style');
so example
Code:
$('.testing2').css('margin','10px');
then there's also a how to animate and add a class or even remove a class
to find out more about jquery and js look at w3schools.com



View user profile



 
Senior Member

Posted on Tue Aug 13, 2013 4:47 am

 
Hi nathan you give me code about jQuery, i need understand about JS then jQuery.. :)
thanks for share code..

But how about my code in above?
How to add CSS in JS, please someone help me, i need learn, thanks a lot Smile



View user profile



 
Senior Member

Posted on Wed Aug 14, 2013 12:59 am

 
24 hours to bump.
please help me bro mark, thanks Happy



View user profile



 
CS Staff
CS Staff

Posted on Wed Aug 14, 2013 11:21 am

 
You need only to edit here :
Code:
 text[number++] = "Random text string ."
And add a div class ,for example :

Code:
 text[number++] = "<div class="randomly">Random text string .</div>"
And now to go in your CSS Stylesheet and insert only that :

Code:
.randomly{
font-size:11pt;
font-family: Trebuchet MS;
font-style: Italic;
color: #333;
}
Change with what you want ,is solved ?



View user profile



 
Senior Member

Posted on Wed Aug 14, 2013 2:13 pm

 
ok thanks jaques for answer my topic :)
but whether the code was not wrong?
I tried but it did not come out.

Code:
<script>        function text() {
                };
                text = new text();
                number = 0;
                // textArray
                text[number++] = "<div class="randomly">Real success is determined by two factors. First is faith, and second is action.</div>"
                text[number++] = "<div class="randomly">Keep going and never quit! The champion is never quit.</div>"
                text[number++] = "<div class="randomly">Make a history in your life, not just a story.</div>"
                text[number++] = "<div class="randomly">If you want to get the best, follow the best person.</div>"
                text[number++] = "<div class="randomly">Delay does not make us deserve to be success.</div>"
                // keep adding items here...
                increment = Math.floor(Math.random() * number);
                document.write(text[increment]);
                //--></script>
whats wrong? thanks a lot :D



View user profile



 
Advance Member

Posted on Thu Aug 15, 2013 4:41 am

 
You can read this :P http://www.impressivewebs.com/jquery-tutorial-for-beginners/



View user profile



 
Senior Member

Posted on Thu Aug 15, 2013 6:10 am

 
Javascript not jquery lol,,, :p



View user profile



 
Advance Member

Posted on Thu Aug 15, 2013 11:52 am

 
LOL...Sorry my bad.

http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript or http://blog.cloudflare.com/combining-javascript-css-a-better-way



View user profile



 
Senior Member

Posted on Fri Aug 16, 2013 11:27 am

 
Manga@ok thanks :)

--------------

please help me bro mark, thanks a lot Smile



View user profile



 
Advance Member

Posted on Fri Aug 16, 2013 12:30 pm

 
i'm not sure about this but..
where are you testing it?



View user profile



 
Senior Member

Posted on Fri Aug 16, 2013 3:26 pm

 
this my forum :)
http://budokai.indonesianforum.net/

---------

ok im explain my problem  :)
hmm :)
now you can see this image,  
This text on poster


and when reload/refresh page, text change again


more details you can visit to this forum
http://duelacademy.net/forum

---------
this code for random text, (work 100% but not use css)
and now i need  my  code for javascript add some class about css
Code:
function text() {
        };
        text = new text();
        number = 0;
        // textArray
        text[number++] = "Real success is determined by two factors. First is faith, and second is action."
        text[number++] = "Keep going and never quit! The champion is never quit."
        text[number++] = "Make a history in your life, not just a story."
        text[number++] = "If you want to get the best, follow the best person."
        text[number++] = "Delay does not make us deserve to be success."
        // keep adding items here...
        increment = Math.floor(Math.random() * number);
        document.write(text[increment]);
        //-->
so can be set positions, margins, font color, font type, at least, can be set with css. :)

help me, im newbie on javascript..
im very appreciate, thanks a lot Wink



View user profile



 
Advance Member

Posted on Fri Aug 16, 2013 3:44 pm

 
Ohh!
so you was adding the
Code:
<div>
with something like
Code:
<div id="">
right?
you should change the quotation mark to be ' not " anymore since you used " at the javascript


and here's an example =
Code:
text[number++] = "<div class='randomly'>Delay does not make us deserve to be success.</div>"



View user profile



 
Senior Member

Posted on Sat Aug 17, 2013 3:01 am

 
yes its wrok, :)
i try in display>generalities, work

Code:
<script>function text() {
        };
        text = new text();
        number = 0;
        // textArray
        text[number++] = "<div class='random1'>Real success is determined by two factors.</div>"
         text[number++] = "<div class='random1'>Keep going and never quit! The champion is never quit.</div>"
        text[number++] = "<div class='random1'>Make a history in your life, not just a story.</div>"
        // keep adding items here...
        increment = Math.floor(Math.random() * number);
        document.write(text[increment]);
        //--></script>
css
Code:
.random1 {
  color: violet;
  font-family: tahoma,verdana,arial;
  font-size: 18px;
  font-weight: bold;
}
now i need put on poster my forum :)


i done try put in
Code:
<!-- BEGIN switch_logo_center -->
 <div style="border:1px solid #141414;"><div style="height: 264px; overflow:hidden; border:3px solid #080808; background: url('http://i.imgur.com/KS899tE.png');" id="mainlogo">
                                                          <table cellspacing="0" cellpadding="0" border="0" align="center" ><tbody><tr>
                                                            <a href="/forum"><div style="height:125px; width:342px; background:url('http://i.imgur.com/7G8ePbB.png') no-repeat;" id="onlylogo"></div></a>
                                                            </tr></tbody></table>
                                                          </div></div>
                                    
       
                                       
 <!-- END switch_logo_center -->
so like this
Code:
<!-- BEGIN switch_logo_center -->
 <div style="border:1px solid #141414;"><div style="height: 264px; overflow:hidden; border:3px solid #080808; background: url('http://i.imgur.com/KS899tE.png');" id="mainlogo">
                                                          <table cellspacing="0" cellpadding="0" border="0" align="center" ><tbody><tr>
                                                            <a href="/forum"><div style="height:125px; width:342px; background:url('http://i.imgur.com/7G8ePbB.png') no-repeat;" id="onlylogo"></div></a>
                                                            </tr></tbody></table>
                                                          </div></div>
                                    

<script>function text() {
        };
        text = new text();
        number = 0;
        // textArray
        text[number++] = "<div class='random1'>Real success is determined by two factors.</div>"
         text[number++] = "<div class='random1'>Keep going and never quit! The champion is never quit.</div>"
        text[number++] = "<div class='random1'>Make a history in your life, not just a story.</div>"
        // keep adding items here...
        increment = Math.floor(Math.random() * number);
        document.write(text[increment]);
        //--></script>
<!-- END switch_logo_center -->
but doesnt work, :(
why?? can you help me? thanks Happy



View user profile



 
Senior Member

Posted on Sun Aug 18, 2013 6:40 am

 
24 hours to bump.
please help me bro mark, thanks Happy



View user profile



 
Advance Member

Posted on Sun Aug 18, 2013 12:48 pm

 
if you want to put it on a specified div use Jquery it's the only way like so you kill the random1 at the texts div then..
so you would use like
$('.random1').html(text[increment]);
then add the DIV somewhere at overall header and put the javascripts in the javascript section and tick all




View user profile



 
Senior Member

Posted on Sun Aug 18, 2013 12:57 pm

 
Ok i will try, now im waiting bro mark, to solved my prob, thanks :)



View user profile



 
Senior Member

Posted on Mon Aug 19, 2013 12:38 pm

 
24 hours to bump.
please help me bro mark, thanks :)



View user profile



 
Senior Member

Posted on Tue Aug 20, 2013 1:53 pm

 
24 hours to bump.
please help me bro mark, thanks ._.



View user profile



 
Advance Member

Posted on Wed Aug 21, 2013 1:17 pm

 
can i remake the script usin jQuery?



View user profile



 
Senior Member

Posted on Wed Aug 21, 2013 5:12 pm

 
Yes you can try nathan, i will wait :)

I need that code can be used in overall header, i think jquery can solved this problem :)

BUMP!



View user profile



 
Senior Member

Posted on Thu Aug 22, 2013 6:06 pm

 
24 hours to BUMP!

Please help me bro mark, thanks a lot.



View user profile



 
Advance Member

Posted on Thu Aug 22, 2013 11:14 pm

 
try this

Code:

// Empty Function
function text() {
};

// Texts
text = new text();
number = 0;
// Add Random Texts Here
text[number++] = "Random text string 1."
text[number++] = "Random text string 2."
text[number++] = "Random text string 3."
text[number++] = "Random text string 4."
text[number++] = "Random text string 5."
// Add Random Texts UP Here

// Math Count
increment = Math.floor(Math.random() * number);

// Div Class /name / attribute
var randomid = '.random1';


// Functions () DO NOT CHANGE
if($){
   $(randomid).html(text[increment]);   
}else if(jQuery){
   jQuery(randomid).html(text[increment]);
}
else{
   document.write(text[increment]);
}
just edit the var randomid = 'random1';
to your css attribute like
var randomid = '#nathan';
btw i setted if it supports $ it will execute with $ or else if jquery suported jquery will be executed or else if nothing supports original javascript will be executed



View user profile



 
Senior Member

Posted on Fri Aug 23, 2013 10:19 am

 
still failed, btw thanks nathan for help :) im really appreciate



View user profile



 
Advance Member

Posted on Sat Aug 24, 2013 11:36 am

 
show me your scripts changes



View user profile


#26

Sponsored content


 

Posted Today at 11:56 am

 





Message (Page 1 of 2)

Permissions in this forum:
You cannot reply to topics in this forum

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None