Just like Stackoverflow, Some floating text box at the top of webpage - javascript

I am not sure whether Stackoverflow is the right place for this question, but I think it has something to do with Javascript.
Here is what I want to add to my webpage: a floating text box at the top of the webpage, you can close it by clicking the "X".
Just like the YELLOW BOX in the following picture (Welcome to Q&A blah blah....):
I tried to Google but I dont know the right phrase for this.
I have read these two questions: CSS to achieve a similar fixed floating div thast always on top of other divs - like stackoverflow does? and div with fixed position.
But How to add the close it by clicking the "X" button at the right?
Also, I like the color of Stackoverflow's floating text box so much. What the color is it?
Can someone give me the code that Stackoverflow uses?
Thanks a lot!

To add a closing button you could use javascript or jQuery if you use jQuery, you would do something like :
HTML:
<div id="yellowbar">
<div id="xbtn">x</div>
</div>
javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <!-- load jquery-->
<!--jquery code-->
<script>
$(function(){
$("#xbtn").click(function(){
$("#yellowbar").hide();
});
});
</script>
simple example: http://jsfiddle.net/mazlix/dcY2A/2/

Let's say you have a div at the top of your page with an X button like so:
<div class="floatingBox" id="message1">
<span class="message">Your message</span>
<img src="x-button.png" id="closeButton"/>
</div>
You can make the close button hide the message box using jQuery like so:
$(function() {
$('#closeButton').click(function() {
$('#message1').hide();
});
});

This is definitely the right place to ask this question!
The background color of the floating box is: F4A83D
The border color of the floating box is: D6800C
The text color in the floating box is: 735005
Here's a fiddle demo:
http://jsfiddle.net/UnsungHero97/FQ3fz/
Note that I'm using jQuery. If you want a pure JavaScript solution, let me know :)
I hope this helps.
Hristo

You can check out meerkat plugin.
http://www.jarodtaylor.com/meerkat/howto/

Here!
DEMO
$(document).ready(function() {
// add some 'if unknown user' check.
var infoH = $('#infobar').height();
$('#infobar').animate({top:'0px'},1000);
$('#infoclose').click(function(){
$('#infobar').animate({ top:'-'+infoH },1000);
});
// close 'if'
});
The only difference is that in my demo the bar is positioned absolutely, but you can adjust the css as you like.
P.S. are the colors ok? ;)

Related

Dynamic jQuery Progress Bar - Click Events Not Working

I have a working JSFiddle where I'd like to be able to change how "filled" the progress bar is depending on the button clicked. When I click said buttons, nothing is happening.
I (previously) added in alerts/logs to make sure that I had the click functionality correct and due to those alerts/logs working once a button was clicked, I'm lead to believe that I just have something wrong in the way I am trying to move the progress bar.
$('.quarter').click(function(){
$(this).parent().prev().children('span').css('width','25%');
});
$('.half').click(function(){
$(this).parent().prev().children('span').css('width','50%');
});
$('.three-quarters').click(function(){
$(this).parent().prev().children('span').css('width','75%');
});
$('.full').click(function(){
$(this).parent().prev().children('span').css('width','100%');
});
$(this) is probably not returning what you think it is. Consider that $(this) relates to the container that the code itself is in; ponder on that for a while and make a comment if you need me to elaborate.
David784 has a great solution for your code as is. Alternatively, consider giving the span that is the moving part of your progress bar some identifier. As an example, while the following will work for changing your progress bar to 100%,
$('span').css('width', '100%');
you'll be changing every span in your code if you have them.
Change
$(this).parent().prev().children('span')
to
$('.progress-bar > span')
With jquery, using these .parent().prev().etc chains will never end well. It's too easy to break by making small changes to your DOM.
fiddle
Your paragraph holding the links was closed, but not opened:
<p> <!-- Here -->
25%
50%
75%
100%
</p>
Fixed JSFiddle: https://jsfiddle.net/j6jxpLwx/

Customize scrolling with buttons

I am trying to achieve the following look for a box that can scroll up and down:
and not the scroll bar on the side. Is this possible that when they click on the up arrow or hover over it, it scrolls up and the same for the down arrow? as well as if they use the scrolling button?
This is just a simple example, I hope it can help you.Fiddle
The only code jQuery you need is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#prev').click(function(){
$('li:last').detach().prependTo('ul').css({'margin-top':'-=100px'})
$('li:first').stop().animate({'margin-top':'0px'},1000)
})
$('#next').click(function(){
$('li:first').stop().animate({'margin-top':'-=100px'},1000,function(){
$(this).detach().css({'margin-top':'0px'}).appendTo('ul')
})
})
})
</script>
If you want to build pure css arrows visit this site: link
And your result will be fiddle
Sometimes the simplicity is the best thing..by
This question provides an jQuery Solution for Scrolling a <div> element on click.
It seems to be flexible so you can customize the scroll step for each click.
How to make a scrolable div scroll on click and mouseover using jQuery

Containment in jquery

I am trying to create switch buttons with on/off states(Using twitter bootstrap).
In this demo you can see that i have outer border to button. Button draggable is true to x-Offset.
I want button not to go out of my boundary. So i put it in a div element and set it to some width.
I don't think it is going good.
Please suggest me what can i do to bound this button in border area.
Fiddle link-
http://jsfiddle.net/stackmanoz/w6AsC/3/
Some code shelf-
<div style="width:200px;border:1px dashed #ddd">
<p id="button" class="btn-inverse btn">Regular link</p>
</div>
And script-
$(document).ready(function () {
$('#button').draggable({ axis: 'x' });
});
Add an extra parameter as explained in the Docs, your friend and helper.
$('#button').draggable({ axis: 'x',containment: "parent" });
Demo
This way you theoretically don't even need the axis parameter.

Using Javascript or CSS, how can I add additional space at the end of a block of text, but only if it does not start on a new line?

Let's say I have some text, with a (more)... link at the end of each paragraph. It ends up looking something like this:
This is just a test paragraph. Click on the more link for more info. (more...)
Now I'd like to add some space between the link and the paragraph text, so I wrap the link in a <span> tag and push it to the right with a margin-left: 10px:
This is just a test paragraph. Click on the more link for more info. (more...)
The problem here is, if the text wraps right on the more so that it shows up on a second line by itself, it will look indented:
This is just a test paragraph. Click on the more link for more info. Push it down!
(more...)
When the desired output should be:
This is just a test paragraph. Click on the more link for more info. Push it down!
(more...)
Is it possible to achieve this effect using either Javascript or CSS?
Side note: It is possible to achieve this effect by removing the <span> tag and using &nbspcharacters to push the more linke to the right with proper text wrapping, but this is a solution I'd like to avoid unless there is no other choice. Or I could use Javascript to insert the &nbsp's before the span, but that's not exactly a nice solution either.
You could set a width on the paragraph and then float the span to the right.
That way the (more...) remains on the the right always.
Not exactly what you are after but I think it looks decent.
Example: http://jsfiddle.net/WFuBd/1/
If you wrap the content before the link in a span and apply a margin-right to that, you'll get the desired effect. (Unfortunately, this, too, is not really a nice solution)
Why not use 2 div's. Div one floats left, div two floats right... Make sure overflow=hidden on div one, and (more...) is on div two.
[div 1 lots of text i.e.: 300px] [div 2(more...) i.e.: 40px]
It will look perfect every time. You'll have to play around with it to look right, but it'll work. You could then just do a little jQuery when you click more...to show the rest and hide 'more'.

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

Categories