Twitter notification ajax bar, how did they do it? - asp.net

I'm trying to get that cool, ajax sliding bar that twitter has (its slightly transparent, white).
I tried looking at the html/css, but it seems that they dynamically inject the various DOM layers.
Does someone know how they implemented it?
I really want to learn how to do this.

run this code in firebug or on document.ready()
$("<div id='notification'>Notification text here</div>").css({
position:"fixed",
top:"0px",
left:"0px",
height:"20px",
width:"100%",
backgroundColor:"#cccccc",
color:"blue",
padding:"5px",
fontWeight:"bold",
textAlign:"center",
opacity:"0.5"
})
.appendTo("body");
and you should have an instant notification bar...
If you are familiar with jQuery (which I assume you are, because the question is tagged with jquery), you can tweak the CSS and HTML values to suit your needs...
To have it slide Down you would do this:
$("<div id='notification'>Notification text here</div>").css({
position:"fixed",
top:"0px",
left:"0px",
height:"20px",
width:"100%",
backgroundColor:"#cccccc",
color:"blue",
padding:"5px",
fontWeight:"bold",
textAlign:"center",
display:"none", //<-- notice this new value
opacity:"0.5"
})
.appendTo("body");
$("#notification").slideDown("slow"); //<-- this is the animation code
Disclaimer: just a quick thing I whipped up, won't be surprised if it didn't work in IE

Related

How to make a html element draggable in css?

my HTML is:
<div>
<img src="random image (doesn't matter)"></img>
</div>
How would I make my div draggable like setting draggable = "true"; in html but I am looking for a css only alternative.
What I have tried:
I had a look at https://css-tricks.com/books/greatest-css-tricks/draggable-elements/ but this answer seem too complex and I feel like there could be a better solution.
Another question (Setting html tag attributes from css) was looking at setting a HTML attribute in css (in this case draggable) and I don't believe that it is possible looking at the answers.
HTML elements can't be made draggable using CSS only. You will need to use JavaScript to make an element draggable. You can make use of the HTML5 draggable attribute for this:
<div draggable="true">Your Content Here</div>
You can also use JavaScript libraries such as jQuery UI to make elements draggable:
$( "#yourElement" ).draggable();
Or use vanilla JavaScript and interact with the HTML5 drag & drop API:
const yourElement = document.querySelector('#yourElement');
yourElement.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text", event.target.id);
});
Note: that there are many ways to make elements draggable and the exact implementation depends on your requirements and the complexity of the drag-and-drop interactions you want to support.

Loading an iFrame inside a closed jquery accordion section

I've been reading threads (specifically this one: iFrame inside Jquery accordion) and still not finding (or not understanding) how to get the Spotify playlist I have hidden in a closed accordion section to fully load on page load.
Many solutions have been offered that I've tried, so far, nothing has done the trick (probably due to my JS noobness). I'd appreciate any insight. Please do be specific about where to put what as I'm very new at Javascript.
JS:
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
autoHeight: false,
alwaysOpen: false,
active: true
});
});
</script>
Relevant HTML:
<h3 id="bubble">The Bubble Creatures</h3>
<section id="bubble">
<div id="bubble-story"><p>Blah blah</p></div>
<iframe id="spotify" src="https://embed.spotify.com/?uri=spotify:user:seedpodpub:playlist:4MsCt5Fkg5G99Tb5VFqzQ4" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</section>
Thank you again!
o.
UPDATED WITH MORE INFO:
Essentially, I want to do this:
If the section style is "#section1 {display:none;}" then do nothing.
If the section style is "#section1 {display:block;}" then trigger the div #spotify to load.
This should overcome the half-loading issue I'm seeing with the hidden iframe (I hope)? I'm looking at this post: Event detect when css property changed using Jquery, again, failing to implement the suggested solution.
It seems like you have found your way out of this but for others I suggested a rather easy solution for this.
I was trying to load my Google map api into an iframe which was inside the jQuery Accordion.
The problem is if you load the accordion as closed, the iframe never loads so if you try to open the accordion you wont see anything in it.
The solution is that to load the accordion as open or active first (active: '0') and then use this code to close your accordion as soon as the page gets loaded:
$("#accordion-map").accordion(
{
active: 'none'
}
);
So what happens is that when you declare your accordion its open and the above code close it right after ;) so you never see it open.
Worked for me just fine in both Chrome and FireFox.

JQuery Mobile + Knockout , CSS Styles fails

I'm using html5, JQuery Mobile and KnockoutJS, I Have a foreach template that renders a grid like GUI from an observable array.
However, when I add items to the bound array, the styles are not applied to any new items.
They appear unstyled, most of the times.
some times they appear with style, but once the styling fails, it stays broken for as long as I run my app.
Does anyone have any idea how to resolve this problem?
Snippet:
<div id="timeEntryList" data-bind="foreach: timeEntries">
<div data-role="header" data-theme="c">
<h1>some header</h1>
The odd thing is that it works sometimes.
Hard to guess without any code. But I guess you 're saying jqm doesn't render properly after dynamically adding elements. That's right it doesn't. I guess it's like the list. And you probably can do something like $('#mylist').listview('refresh'); but I don't know what sort of component you're talking about.
you can find more info in the documentation
jQM might not support more than one data-role="header" section. I would try conforming to their standard page layout with one header, one content and one footer section and see if that helps.
I've found that if I update my KO observables in pagebeforeshow I don't have to use .listview('refresh')

Force a refresh on a Jquery Mobile controlgroup button on small screen display

I have a Jquery Mobile controlgroup with two buttons:
<div data-role="controlgroup" data-type="horizontal" class="headerMenu iconposSwitcher">
EAN
Style
</div>
On larger screens (PC, iPad) I want the text to show ~ data-iconpos="left".
On smaller screens (Mobile, Smartphone) there is little space, so I don't want to display the text ~ data-iconpos="notext"
I can use the "refresh" function on select-menus. Is there a similar way to refresh controlgroups or button elements?
I tried it like this, changes iconpos, but does not rebuild the button.
if ($('body').width() < 275)
{
$(".iconposSwitcher a").attr('data-iconpos','notext');
$('.headerMenu').controlgroup('refresh', true);
}
Thanks for hints & Rgs
EDIT:
This works:
$(".iconposSwitcher a").removeClass('ui-btn-icon-left').addClass('ui-btn-icon-notext');
Easier than thought...
EDIT:
For div elements (controlgroup with input):
$(".iconposSwitcher-div a").attr('data-iconpos','notext').removeClass('ui-btn-icon-left ui-btn-icon-right').addClass('ui-btn-icon-notext');
maybe its too late but for those who come here with same question:
You can use .trigger('create') on any Element to trigger 'Create' event to do JQM magic on elements.
I've solved it this way:
$button = [YOUR CONTROLGROUP DIV]
$button.find('a').button();
$button.controlgroup();
For buttons, use the buttonMarkup() method instead of controlgroup()
In general, I prefer the usage of the page() method, see this post
Jquery Mobile: updating a form more than once
What works for me is calling controlgroup() twice; once to initialize, next to refresh, eg:
// refresh group
$('#checkboxes').controlgroup().controlgroup('refresh');

How Stackoverflow has implemented the logic for displaying flags on mouse over of comments

I need logic to display images on mouse over of datagrid in asp.net
If you want to know how SO does it do as Wikser suggests and view the source. If you want help to do something similar then I'll need to know what client side libraries yo are using.
Without having looked at SO source I see an empty space that an image appears in when the mouse is over something else. If I were to recreate this behavior I would do something like this for the HTML:
<img src="..." id="flag" style="visibility: hidden"/>
...
<span id="comment">blah blah blah</span>
and I would use JQuery like this to set up the effect:
$("#comment").hover(
function() {$("#flag").css("visibility", "visible"},
function() {$("#flag").css("visibility", "hidden"});
I suggest try jQuery balloon tips
Here are many examples.
http://www.dreamcss.com/2009/05/12-jquery-tooltip-for-web-developer.html
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
http://www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-plugin
The logic is that create on fly a cool div set with your informations, and display it on mouse over, in the position you wish.

Resources