I have some problems with Javascript. In fact, I'm just newbie in that script language so I need some help..
Q: how to make this link active:
something
this link is just link to the div which is located in index.html file, so there is no loading of page.
and here is the div
<div id="box1" class="box">
<h3><a name="box1">something</a></h3>
</div>
Since you're just starting out, I'd suggest you use a library such as jQuery. So, if your HTML is like this:
<div id="box1" class="box">
<h3><a name="box1">something</a></h3>
</div>
<div id="box2" class="box">
<h3><a name="box2">something</a></h3>
</div>
<div id="box3" class="box">
<h3><a name="box3">something</a></h3>
</div>
And you have a CSS class called youarehere:
.youarehere { color:white; background:green; }
With jQuery you could write something along the lines of:
$(".box > a").click(function() { // when clicking any of these links
$(".box > a").removeClass("youarehere"); // remove highlight from all links
$(this).addClass("youarehere"); // add highlight to clicked link
})
In plain JS, it takes a bit more effort to achieve this. Do yourself a favor and don't reinvent the wheel - people have already taken care of this, so use the product of their labor to make your life easier.
a:active means when you click the link the css properties will apply on the link, instead of using a:active use
a.visited{color:red;}
To change the link text color on mouse over use the following css:
<style type="text/css">
a:hover{color:Red;}
</style>
Related
I am fairly new to using html and css beyond the minor basics. I am trying to make a loading page for a website and can't seem to find an example for my exact case.
Here is the html I want to show only on loading:
<section id="hero">
<div id="mast">
<h1><img src="data:image/image/gif;base64/=" alt="bus" /></h1>
<h2>Let's Travel</h2>
</div>
<div class="arrow"><a data-scroll data-speed="750" data-easing="easeInOutCubic" data-url="false" href="#navigation"><i class="fa fa-angle-down"></i></a></div>
</section>
I saw an example on stackoverflow loading class of html like this:
<script src="js/jquery-1.12.3.min"></script>
<script type="text/javascript">
$(window).load(function() {
$(".classname").fadeOut("slow");
})
</script>
Is there away to have a section load by the id instead of just a css class?
In jQuery, you can use CSS style selectors. So, if I want to select all elements from a class I can do $('.classname'), if I want to select an element by id: $('#idname'), if I want to select all <p> tags, I could do $('p'). Hell, I could select all <bold> tags within <p> tags by doing $('p > bold').
Anyway, I'd take a look at how CSS selectors work, and then you'll now how to select anything in jQuery: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
In your case, I'm guessing you want to use $('#hero').fadeOut()
I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});
I was wondering if it's possible to add a class to an image that is uploaded through tinyMCE.
I have this string that calls the description from my database.
<div class="articletext"><?$string = $image["description"];
Currently, to make the images responsive I add this inline css.
<style> img{width:100%; height:auto;}</style>
It works fine I just find it a bit sloppy and would like to see if there is a better way.
The output code looks like this when rendered: down by articletext is is where the image is shown.
<div class="grid_4">
<style> img{width:100%; height:auto;}</style>
<div data-id="id-80">
<article class="box white-bg mb-25">
<div class="notices-title">Test Image In Post 1</div>
<div class="newsdate" style="margin: 10px 0 !important;">February 26, 2014</div>
<div class="articletext"><p><img src="../../htp_filemanager/source/AllImages/bob-van-aubel-ray-bans.jpg" alt="bob-van-aubel-ray-bans" /></p>
<p>This is a test.</div>
What I'm looking for is a way to add class="img-max" automatically when an image is uploaded through tinyMCE.
Using the style below would solve the problem easily.
<style>.newsdate img{width:100%; height:auto;}</style>
Try to use onChange event of TinyMCE to keep track when the contents was modified along with
addClass() to add new class to your image:
tinyMCE.init({
setup : function(ed) {
ed.onChange.add(function(ed, l) {
$('.newsdate img').addClass('img-max');
});
}
});
I have 90+ divs with an image/icon in each div. I want it so that when I click one of them, that image appears in another div. What would be a decent way to do this? I don't know much about JS yet, so a little example of this with HTML would be appreciated, also limited to html5, Ajax and js.
EDIT: I should clarify that the div I want the content to go into is already made, it doesn't have to be created as well.
<link href="CSS/mainSource.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="display()">
<div id="testBox">
<div id="contentScroller">
<!-- I want to click one of these... -->
<div id="ahri"><img src="images/LoLchamps/Ahri.png" width="64" height="64"></div>
<div id="akali"><img src="images/LoLchamps/Akali.png" width="64" height="64"></div>
<div id="alistar"><img src="images/LoLchamps/Alistar.png" width="64" height="64"></div>
<div id="amumu"><img src="images/LoLchamps/Amumu.png" width="64" height="64"></div>
<!-- ...and clone the div OR content from clicked div/image into a div that I'll set up below the clear fix -->
<div style="display: block; clear: both;"></div>
</div>
</div>
<script type="text/javascript">
var myScroll = new iScroll('testBox');
</script>
</body>
</html>
Thanks.
- Ken B.
Try this (you need Jquery libary loaded)
$(document).ready(function () {
$("div.selecters").click(
function () {
$("#clone").html($(this).html());
});
});
This is an example, it would not work on your HTML unless i guessed lucky with my classes and id's
Here is a DEMO
read about :target in css3
its pretty easy
with CSS3 no much use of JS
read a simple but great tutorial
On css3-tricks
and the demo
it really worth reading
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});