I apologize if this question is vague, but I want to build a drop down header, very similar to the one on StackOverflow that alerts you whenever you have earned a new badge, or on Twitter whenever a new tweet comes in.
I've been looking around on the internet for a tutorial, but I'm having trouble googling exactly what I'm looking for. I assume there is a way to do this in jQuery, or there may be a jQuery plugin for it, but I haven't had any luck finding one.
The idea would probably be to make an AJAX request every so many seconds, and if a new alert-worthy item is found, display it for the user.
If someone could point me to a resource to learn how to build one, and/or an existing plugin, that would be great.
EDIT:
If anyone is curious how I made the actual header using jQuery,
In the success callback function of your ajax:
$("#alertHeader").html("whatever you want to say");
$("#alertHeader").slideDown("slow");
Where "alertHeader" is the id of your alert div.
The corresponding CSS for the header is:
#alertHeader {
position:relative;
background:#313115;
width:100%;
height:30px;
display:none;
float:left;
position:relative;
z-index:10;
}
#alertText {
padding-top: 2px;
margin-left:auto;
margin-right:auto;
color: #FFF;
font-size: 15px;
font-style: italic;
text-align: center;
}
You are basically looking for a periodic polling script. You can achieve that by using setInterval() in a function to call itself recursively and do your AJAX request/status check in it.
http://ajaxpatterns.org/Periodic_Refresh
http://enfranchisedmind.com/blog/posts/jquery-periodicalupdater-ajax-polling/
For the UI display part of this, you are looking for a fixed header with a link that uses jQuery or whatever javascript to hide the header when clicked.
Edit: this link is probably a better example.
Related
I'm just trying to get the backgrounds touching on their long edge; like in this code, but with the two blues touching.
the code i have:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
You have to normalize the css (overwrite the default states of padding and margin properties).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
As much as Kind User's answer solves your problem perfectly, you will still find yourself having to ask for help again next time a similar problem occurs. So rather than attempt to answer your question directly, I will explain how to figure it out for yourself.
Your browser will have an inspector (usually right click and choose Inspect from the context menu). I often use Firebug which is an extended inspector you can install as a plugin, but it is not essential for this task and the one built into your browser will suffice.
Click on the button on the top left of the inspector that looks like a cursor over a box, then click on any element on your screen to select it.
You will see under 'rules' all of the CSS rules that are currently affecting that element. Selecting the 'box model' tab will allow you to see the size of the element itself as well as the padding, border and margin on each side. Hovering your cursor over the element will also highlight each part of the box model separately so you can easily tell that the white space you saw was part of the margin.
To test this theory, you could go back to the rules tab and create a new rule stating margin:0px; and you will immediately see the effects. This is an effective technique for checking what CSS changes would appear to do before adjusting your actual file.
Side note: Just for clarification, although I would like to think it was obvious, I never make such assumptions. Any changes made in the inspector are entirely non-persistent in that they will not be saved in your file. If you refresh the page it will reload from the file and any changes made in the inspector will be gone.
I am very new at jQuery and I want to dive right into it but i need help. I have provided a image below to explain what I need. What i want is when #DivText is scrolled up and no longer visible to the user I want to Animate #ActionDiv.
Please help me out with this I have been looking at jQuery plugins all day and so far none of them do what i want them to do.
The code I have so far ( requested )
<div class="welcomeimage" ></div>
<style> .welcometext{
color:white;
font-size:50px;
position:absolute;
padding-top: 100px;
padding-left: 150px;
float:left;
font-style:italic;
} </style>
I don't have any jQuery associated with it yet because I'm VERY new with jQuery.
What you exactly want is jquery scroll() event.
there are many plugins available to achieve this
this is one of them
refere this link
ref
and click on View the demo demo
If you want to know more basics about scroll() then refer this link
I have been trying to wrap my head around this issue for the past few hours but with no success. If you look at this page.
On the left side, where its titled "Latest Tweets", there is a mysterious left-padding to the list of tweets. I can assure you that I have not added any styling to it to have that padding... not to my knowledge anyway.
For a past few hours ago, before I made major changes around the page, it looked perfect. Here is a screenshot of how it should be aligned.
Its 11.15pm, I'm tired and I want to watch Game of Thrones. Can someone kindly assist me in solving this issue so that I can call it a night?
You have margin-left: 15px; on .projects li.
That is what causes the move to the right...
Perhaps you added it for the list of videos, but it is affecting the list of the tweets since both are under the projects element.
Add .projects .sidebar_left li{margin-left:0} to fix it..
Update
or better yet, since you already have a rule for them #twitter_update_list li add the margin-left:0 to that.
Gaby beat me to posting the answer, but you could have found it yourself inspecting the elements using Google Chrome for example - you can click an element and it tells you what style the element has, like this:
.projects li {
width: 202px;
display: block;
float: left;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 40px;
}
Better yet, you appear to be able to test style changes LIVE. Pretty cool, actually.
I ma helping someone out to make a web site but I cant find solution how to add HTML & CSS instead of images in the javascript "ContentFlow" it has been downloaded here: http://www.jacksasylum.eu/ContentFlow/
here you can see how it looks with html text:
http://portfoliodummy.medienbayer.de/ContentFlow_mb_test/
as you can see when you move the blocs the text goes up and down! I have tried to add padding to it. not to assign font-size... but it wont work. I need to know if anyone has any idea or maybe solution. I know that images are the best way to go but he wants it to be with HTML.
Thank you for your Help
.ContentFlow * {
margin: 5%; /*adjust the value as you prefer */
}
.ContentFlow .flow .item div.content {
overflow: hidden;
}
tested only on chrome/linux. :-)
This improves the situation. Not sure if further improvement is possible.
You could use
.ContentFlow .flow .item div.content {
overflow:hidden;
white-space:nowrap;
}
Then do hard breaks <br /> on the content to ensure each item fits in the box. There'll be some clipping on resize but you won't have a bounce. You could probably automate where to put the breaks with a little javascript magic too.
http://www.baelkopat.com/GECCo/goingGreenTest.html is what I have so far. What I need to learn is how to show the additional text when a user mouseOvers the link. i.e. when a user mouseOvers on "Activity Guide(PDF)" the "Download and print...." shows up.
I have pretty good experience with ActionScript not that very new to JavaScript. I was wondering how to make the mouseOver effect happen.
The hover div is crated using css
overTextA{
position:absolute;
left:190px;
top:7px;
width:280px;
padding:10px 15px;
background-image:url(../images/navMenuOver.png);
background-repeat:no-repeat;
z-index:3;
}
overTextB{
position:absolute;
left:190px;
top:40px;
width:280px;
padding:10px 15px;
background-image:url(../images/navMenuOver.png);
background-repeat:no-repeat;
z-index:3;
}
and in HTML
<div id="overTextA"> Download and print a PDF-version of the Junior <i>Going Green with GECCo</i> guide, with activity information, instructions, and resources. </div>
<div id="overTextB"> Take the <i>GECCo Challenge !</i> Help our planet by saving energy AND earning money for conservation.</div>
I am not sure that is the best way to do it but for now I just want to have a workable version working that shows the appropriate text when mouseOver on the nav link.
Thanks, Rex
You could achieve this in a straight forward fashion using a library like jQuery.
Here is a tutorial that will walk you through using a .hover() function:
http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything
Clarification:
Add / remove your classes to the hover element, adding would display it, and removing or hiding it would take the text element away. jQuery is very useful when you don't want to dive into JS too much. Hope that helps!