HOT! DELICIOUS! JAVASCRIPT

          Hello people!! what’s up! So I am back with another blog and this time is home made pure JavaScript. I have been introduced to JavaScript during FSMK summer camp and I have been flabbergast ever since with the potential this scripting language has. So JavaScript was taught to us by Gautham Pi sir who is a proud founder of Jnaapti , he was generous enough to offer free online course on JavaScript to whoever was interested. I was curious, so I enrolled and to be honest it helped me lot I had amazing experience brainstorming on problems and learning entirely new concepts. Shree Laxmi ma’m made sure that we are regular and disciplined about the course. The entire concept was amazing and I really I loved the way it worked out for me . THANK YOU JNAAPTI .
Now, coming back to the JavaScript , I came up with the following approach during the camp. The problem was while using an outdated tag called <marquee></marquee> I wanted that my scrolling text should stop when user has its mouse over the text and at the same time it should highlight the content. So, as someone told me that first you should know the problem , then think about how to solve it and if solving requires learning a new skill then learn it . Yeah, So what I did was , you guessed it right I used . . . “JavaScript” TADA!!
The approach was to make the scrolling stop and highlight the text a.k.a “reduce the opacity” when user points on the text and resume the same when user takes out the mouse. I wrote a small yet clever JS function for that, what my JS did was it sets the attribute called onmouseove to an inbuilt function called this.stop() and onmouseout to this.start() that reduces my job , hush!. Now , I made two functions one to increase the opacity and the other to set it back. It sounds simple right? Well it is, the the problem was the number of time i need to call those function and it WAS MAKING MY SWEET, SIMPLE, SEXY, AND GORGEOUS JS (no! I am not describing my dream girl 😉 ) to look tedious so I had to do something so I made a parameterized function and incorporated into it. So, the code is ……*DRUM ROLLS * 😛

something is missing
ON MOUSE OVER
something is missing
ON MOUSE OUT


<script>
function CompAct(para){
document.getElementById('scroller').setAttribute('onmouseover', 'this.stop()');
document.getElementById('scroller').setAttribute('onmouseout', 'this.start()');
function changeColor(){
para.style.backgroundColor='#f3d67d';
para.style.opacity='0.5';
}
function removeColor(){
para.style.backgroundColor='';
para.style.opacity='';
}
para.addEventListener('mouseover', changeColor);
para.addEventListener('mouseout', removeColor);
}
CompAct(document.getElementById('news1'));
CompAct(document.getElementById('news2'));
CompAct(document.getElementById('news3'));
CompAct(document.getElementById('news4'));
CompAct(document.getElementById('news5'));
CompAct(document.getElementById('news6'));
CompAct(document.getElementById('news7'));

</script>

 

Cool! isn’t it ! Well I think so these many lines of code did that amazing job. Ok! Something I wanted to share, to all the noobs like me who must be thinking WTH! I wrote document.getElementById when I had the option of making it a variable. The answer to that question is IT CAUSES GLOBAL VARIABLE POLLUTION, in short it increases the size of the webpage and make it heavy and difficult to load . So , try this out people hope you like it I am putting up the code for this page as well as the whole website on git to check out here . Feel free to commit and criticize ! peace out until next time.

 

 

Advertisements

4 thoughts on “HOT! DELICIOUS! JAVASCRIPT

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s