how to do css div pop up scrollable using only javascript? - javascript

I want to display some text in a inline popup window with ok/close button.
I implemented and bit modified Custom Alert but sometimes the text has too many lines so I need the window scrollable.
I want to use only javascript. No framework nor libraries.

you should be able to accomplish that with css
With the default style it would be like this:
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
overflow:auto;
}
Example on jsfiddle.
Also as Casablanca points out, if you want to assign a specific class you can modify the javascript to use
msg.className = 'messageBox';
and then your own css
.messageBox{
overflow:auto;
}

Related

Can I use JQuery with inline html? If so how?

I learned html and css a week ago. I completed my first project only to find that a div tag I used was not resizing to mobile formats. I have done some research and it seems the answer may reside with JQuery or .JS. I am working within a contained environment, Wordpress.com, and I don't know Java Script yet, but I am familiar with if then statements from studying logic for years.
So I effectively have two problems:
Can I use JQuery with inline html: no css?
How do I do it?
I know I am way off here. I am in the process of going through a .JS tutorial on codeacademy, but I am not finished.
Just thought I would try for advice here. I may not even be in the ballpark!
Here is my div tag and here is what I attempted:
<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>
$(window).resize(function() {
if ($(this).width() < 951) {
$('.divIWantedToHide').hide(<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>);
} else {
$('.divIWantedToHide').show(<div style="width:450px;height:5px;background-color:#FFFFFF;"></div>);
}
});
Javascript is kind of over-kill for this kind of thing.
I would suggest using CSS media queries.
Paste this in and it should work just fine :)
<style>
#YourDiv{
height:5px;
background-color:#FFFFFF;
}
#media only screen and (min-width:951px){
#YourDiv{width:950px;}
}
#media only screen and (max-width:950px){
#YourDiv{width:450px;}
}
</style>
<div id="YourDiv"></div>
Instead of having your style defined in the div tag, your div now has a unique name (an id) that can be styled separately. This is incredibly useful, and most would argue necessary, once you start building more complicated pages. The #media tags do basically the same thing as your if statements, where min-width:951px will set the style when your window is AT LEAST 951px and max-width:950px sets the style when your window is AT MOST 950px. The rest of the styles that don't change are set above ONE time because they are the same regardless of window size.
And now, just for fun I'll show you how to do it in pure Javascript as well:
http://jsfiddle.net/AfKU9/1/ (test it out by changing the preview window size)
<script>
var myDiv = document.getElementById("myDiv");
window.onresize = function(){
var w = window.innerWidth;
if (w > 600){
myDiv.setAttribute("style",'position:absolute;height:50px;background-color:#CCC;width:400px;' )
}
else{
myDiv.setAttribute("style", 'position:absolute;height:50px;background-color:#333;width:100px;' )
}
}
</script>
$('.divIWantedToHide').hide() will hide the div !!
In order to apply css to this div you need to use css:
$('.divIWantedToHide').css('width':'950px','height':'5px','background-color':'#FFFFFF');
If you want to append any div and apply css to it then use append/html
$('.divIWantedToHide').append('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');
or
$('.divIWantedToHide').html('<div style="width:950px;height:5px;background-color:#FFFFFF;"></div>');
No, at wordpress.com you won't be able to use inline JavaScript. Not in regular posts using the HTML editor nor using the Custom Design upgrade that only includes a CSS editor.
Maybe you'll benefit from the following:
Preprocessor
WordPress.com has support for CSS preprocessors LESS and Sass (SCSS Syntax). This is an advanced option for users who wish to take advantage of CSS extensions like variables and mixins. See the LESS and Sass websites for more information. You can select which syntax you would prefer to use at the bottom of the Appearance -> Customize -> CSS panel.
If you want to resize or apply another style to some elements adapted to the device screen size, yout can just use the #media css property.
#your_div_id {
width: 950px;
/* ... */
}
#media (max-width: 38em) {
#your_div_id {
display:none;
}
}
You are trying to hide a div with class '.divIWantedToHide'. But your div does not have any class.
So you should add to your div the class:
<div class="divIWantedToHide" style="width:950px;height:5px;background-color:#FFFFFF;"> </div>
And then, you can show and hide it like here:
$(".divIWantedToHide").hide()
$(".divIWantedToHide").show()

How to trigger bootstrap's mouseover effect programmatically

In twitter bootstrap, some elements get "greyed out" when the mouse hovers over them. This is true of buttons and linked list group items. Two examples are here: http://imgur.com/a/ABhkT#0
Can this effect be triggered programmatically? If so, how?
Yes, Using the 'onmouseover' attribute. It is quite similar to the 'onclick', except obviously for hovering instead.
Like the 'onclick', you will have to include a java script function that would change the css style for that element.
Depending on what you are trying to have this effect on, you could either put it right into the tag that is the object, or use <span></span>.
Ex:
<div onmouseover="fade()">
<p>text to fade</p>
</div>
Javascript:
function fade(){
code to change style
}
should be straight forward, this would fade everything inside the div (including the background)
Ok, I figured it out.
If the effect were being caused by a css class, one could simply apply the class to the element, like this:
$('<my_element>').addClass('bootstrapMouseoverGrey')
This doesn't work, though, because the effect isn't caused by a class. It's caused by a pseudoclass. Pseudoclasses can't be added programmatically.
One workaround is to create a new actual class with the exact same definition as the pseudoclass. In my case, the pseudoclass is a.list-group-item:hover, defined in bootstrap.css.
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
I edited bootstrap.css to make a new (actual) class, bootstrapMouseoverGrey, with the same definition as the pseudoclass.
a.list-group-item:hover,
a.list-group-item:focus,
.bootstrapMouseoverGrey {
text-decoration: none;
background-color: #f5f5f5;
}
Now, I can just add this class to an element using the line at the top of the answer. This gives me the result I want. Works like a charm!
Using jQuery:
var event = jQuery.Event('<event_name>');
event.stopPropagation();
$('<selector>').trigger(event);
Taken from the docs.

Is there a way to have a div tag without having a line break, or is there an alternative?

In my website, in asp.net 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.
Basically, I have this in my footer:
Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888
And the only thing I want printed out is the phone number.
I use
<div class="noprint">whatever I want omitted when printing</div>
And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!
Update: My print.css stylesheet looks like this:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!
gd1 is absolutely right about span/div and display inline/block, but on a side note I'd add that what you're trying to achieve is often done with a list (as it really is a list of links in your footer)
<ul class="footer">
<li class="no-print">KnowledgeBase</li>
...
<li>888-888-888</li>
<ul>
with a css like
.footer li {
list-style-type: none;
display: inline;
padding: 0 10px;
border-right: 1px solid black;
}
.footer li:last-child {
border-right: none;
}​
hope that helps
Use <span>.
However you can make a div "inline" using the style display: inline, but in this case you just need a <span>.
use css
<div style="display:inline" class="noprint">whatever I want omitted when printing </div>
If not use the inline counterpart span, as a answer already said. But remember inline display donot have block properties like height, top-margin, bottom-margin.
If you still want to use an extra div, I recommend using display:inline, but if you just want the whole footer to have both classes you can do that as well.
You can add multiple classes like this:
<span class='footer lower noprint'></span>
In CSS this would look like:
.footer.lower.noprint{ display:none; }
Alternatively, the 'noprint' class will also work without specifying all three classes.
Here's an example: http://jsfiddle.net/yKRyp/
well set the specific width and height of the div using CSS and apply float
<div style='float:left; border:1px solid blue; width:100px; height:100px'>
div 1
</div>
<div style='float:left; border:1px solid red; width:100px; height:100px'>
div 2
</div><div style='float:left; border:1px solid orange; width:100px; height:100px'>
div 3
</div>
a live example here
http://jsfiddle.net/AGWGs/
div is a block-type element, it is usually used as to group and contain block-type elements.
Using CSS, you can change the display type of any element, however.
In a quick example:
display:inline Makes an element to show inline, they can be put side by side. span element is an inline element. This cannot use block-type-only css rules such as: margin, padding, width, height ...
display:block Makes an element to be displayed as a block. Unless inherited values or given CSS rules, they will take a line long, blocked. They can take block-type CSS rules. And they can be stacked side-by-side using float. However, unless the line is cleared(clear: left, clear:right or clear:both), following elements after the floated element will overflow the previous container.
display:inline-block Makes an element have block features, with inline displaying. This is pretty similiar to using float and making block-type elements shown in-line. However this rule is IE8+ support only, so I would encourage you to use floating to keep the maximum compatibility.
P.S: There are hacks that can be used to have display:inline-block feature used on IE5.5+.

CSS/Javascript-based image selector

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

HTML/CSS "Pop-Up" Window and Disabled Background

This is a silly question since I can't find the right keywords to use to get the answer by searching Google, unfortunately.
You know when you click a link and the background dims and becomes unusable but the foreground either has an image or a sign-in box usually? Like the Yahoo mail image displaying method where everything in the background becomes grey transparent and the image itself is just fine?
How is that done? And what is it called?
it's done by creating an overlaying div on the fly in JS, like:
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
use a CSS class like
#OVER{width:100%; height:100%; left:0;/*IE*/ top:0; text-align:center; z-index:5; position:fixed; background-color:#fff;}
.overlay {width:100%; z-index:6; left:0;/*IE*/ top:30%; font-color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed; background-color:#000;}
dunno how it's called ..
You want to create a "modal box" or "lightbox". Examples:
http://fancybox.net/
http://www.huddletogether.com/projects/lightbox2/
thickbox
eg: http://jquery.com/demo/thickbox/
For images and stuff i use prettyphoto
For text popup Dialog
this is all done with the use of jquery a javascript
You can use smoothbox, along with mootools.

Categories

Resources