I am pretty new at HTML, CSS and JS.
I had an idea of making a simple page titled, "an act of random kindness" where a user would simply go, type something in the box and press submit that will simply post down whatever he's just written.
To get that, I made a simple HTML page with a simple form having a "text box" and "submit button". next, I assigned two variables to the "text box" and "submit button" then with "onclick.button" property I wrote a "button handler event".
This buttonHandler is further connected to a function which simply takes the text written in box and make it appear down the page as a child element.
Now the problem is, I have no idea how to control the presence of these new child elements. I want to be able to change their color, font, and where on page are they appearing. and if possible, I want them to appear in separate boxes.
[coding][2]
I've changed your jsFiddle a bit to demo the following http://jsfiddle.net/Klors/E6Nns/5/
Once you have your
var li =document.createElement("li");
li.innerHTML = msg;
you can start to manipulate styles by either giving them a class, some styles, or both. eg.
li.style.backgroundColor = "#ffffff";
li.style.color = "#000000";
li.style.border = "1px solid pink";
or
li.className = "heading";
As for positioning them all, you need to style your <div class="list">, you can do that in the CSS by applying some positioning. (also physically move it outside of <div class="wrapper">). eg.
div.list {
position: absolute;
top: 10px;
left: 20px;
width: 100px;
}
Related
I want to add a button in my web page when a certain event is occurred by using javaScript. I searched online much and try to solve this problem by using appendChild() function.
My code is like this :
var btn = document.createElement(‘button’);
btn.body.appendChild(btn);
Here I am facing two problems
My button is added but in a certain corner of my html page and
I can’t add style to this new created button without providing css to other buttons.
So how can I add this button in a certain positon and add css to this button
Thanks in advance.
Your first problem is you added the button after body. So that your button is appeared in a certain corner of your html page.
To solve this problem you may add this after an id containing div. And this div must be in your expected location.
Make a div which id is myButton in your expected location
id="addButton"
Then append your button after this id like this
document.getElementById("addButton").appendChild(newButton);
To provide CSS to this new created button your CSS code will be like this
#addButton button {
display: block;
background: green;
padding: 10px;
color: #ffffff;
}
To provide the hover effect your code will be
#addButton button:hover {
background: red;
}
Append it to the document instead of a button..
var btn = document.createElement('button');
btn.innerText="button";
btn.style.background="red";
document.body.appendChild(btn);
So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click
I'm hoping to overlay text from a variable at the bottom of every image using jquery preferably, or javascript.
Here's the project I'm working on - http://codepen.io/chrismcintosh/pen/ejzut.
This is the first javascript I've ever produced so don't be too hard on me.
Can anyone point me in the right direction?
The question is a little light on the details but hopefully this helps. First, you need to add an element that will hold the data to your HTML. You can do this via JS instead of via HTML if you want, but here goes:
<img src="http://greatworkperks.com/sites/default/files/perks/RunorDye2.jpg"
class="tile" id="Run Or Dye" data-toggle="modal" data-target="#myModal"
onclick="myFunction(this.id)">
<!-- Below is the new div -->
<div id="RunOrDye_Overlay" class="overlay">Run or Dye</div>
Next, add the corresponding CSS style. Here is one that might work:
DIV.overlay{
position: relative;
display: inline;
top: 110px;
left: -290px;
background-color: #333333;
color: white;
}
At this point your overlay exists. I'm not sure if you need your JS to actually do anything at this point -- you could set up your JS to toggle this div when the user hovers over the image or something like that.
Does this help?
Instead of hard-coding the overlays into your html, you can use jQuery's .wrap() function to wrap each tile, and then append a text element to each wrapper.
// wrap each tile in a span
$('.tile').wrap('<span class="tile-wrapper"></span>')
// append the text to each wrapper
$('.tile-wrapper').each(function(){
var $this = $(this);
$this.append('<div class="image-text">' + $this.find('img').attr('id') + '</div>');
});
If you make each wrapper element position: relative and each text overlay position: absolute the overlays will automatically be positioned in the middle of each tile. Then you can adjust the overlay's bottom property to put them at the bottom of the tile.
Here's the updated CodePen
So forgive me, I'm just starting learning Javascript, I don't even know if this is possible. I have the following HTML code:
<div class="container">
<div class="topspace">
<div id="picholder" class="pic1">
<div class="picsel" id="picsel1" onclick="imgSel(1)"></div>
<div class="picsel" id="picsel2" onclick="imgSel(2)"></div>
</div>
</div>
</div>
And so what I want to accomplish is by clicking on one of the "picsel" divs (they appear as little squares at the bottom of the picholder div) I can change the backgroundImage used in picholder by changing the class associated with the picholder div. My Javascript appears as such:
function imgSel(n) {
var id1 = "pic" + n;
var id2 = "picsel" + n;
// 'zero out' all the picsel boxes to their default color
document.getElementByClass('picsel').style.backgroundColor="#333";
// change the background-image for picholder
document.getElementById('picholder').style.className=id1;
// change the picsel box that was clicked to white
document.getElementById(id2).style.backgroundColor="#FFF";
}
And my CSS appears as such:
#picholder {width:798px; height:340px; border:1px solid #333; background-color:#333;}
.picsel {width:8px; height:8px; background-color:#333; border:1px solid #333; margin-left:4px; top:340px; position:relative; float:left;}
.picsel:hover {cursor:pointer; background-color:#888;}
.pic1 {background-image:url('data/main001.jpg');}
.pic2 {background-image:url('data/main002.jpg');}
I've run an Alert on it and the variables are being added right, so I guess what I'm wondering is, is it possible to change the className (or is that even a command?). At this point I'm thinking I can't assign a variable to the className=var or getElementById(var), but...well...have at it.
It's currently running at http://www.mdw-art.com/, but in an HTML-based version that doesn't indicate which square is currently being displayed. So I basically want it to do that, but I'm trying to get the boxes to indicate which one is currently displayed and get the code out of the HTML (because I want to apply this same concept to other galleries later).
Yes, add a class name to the selected item and allow the CSS of that class do the work for you instead of changing the inline style with JavaScript. That way you can just remove the class name from the element to un-do the selection.
try .className instead of .style.className
I'm total noob with CSS and it looks like hell =/
I have absolute positioned DIV and I handle mouse events over this DIV with JS like this:
<div style='position: absolute; left: 0px; width:50px; height: 50px;'
onmouseover='this.style.border="2px solid red"'
onmouseout='this.style.border="1px solid black"'>
</div>
<div style='position: absolute;'>SOME TEXT</div>
I need to place some text over this DIV and over the few same DIVs, but if I place any element over this DIV onMouseOut event is firing when mouse cursor switch to text. Tag with text can't be inside the DIV. Playing with z-index didn`t help. My browser is IE8.
UPDATE:
I can't place text into the div because text must go beyond bounds of DIV. In other words I want handle mouse events over arbitrary area in any text. I can do this if I set backgroundColor of DIV, but I need handle events of transparent area.
tried {cursor: pointer} on the text div?
If you're trying to do this purely with mouseover events, then the only way to achieve what you're after is to place the second div inside of the first.
On the other hand, if you want to dive into some scripting, here's a basic algorithm for how you can handle this:
Set up a function to fire when you mouseover the trigger divs. This function will show the "SOME TEXT" div, if its display is set to "none".
Set up a function to fire when you mouseout of the trigger divs. This function will be a little more complex. First you have to check to see what the event.currentTarget is; if event.currentTarget is the "SOME TEXT" div, return false. If it's anything else, then you set the display of "SOME TEXT" to "none".
This might be a little beyond where you are with CSS and JS, but it's pretty much the only way to get it done, since CSS alone won't do what you need.