How can show closeable in the top of the page like stackoverflow new answers.
im using asp.net
It's really pretty simple - there's a div, with a control in it (an anchor I imagine) with a click event bound to it which removes the parent item from the DOM. Something like this
<!-- html -->
<div id="warning"><a href="#" class='close'>[X]</a></div>
And then some event goodness:
$(document).ready(function() {
$('.close').bind('click', function(e) {
$(this).parent.remove();
});
});
and you're pretty much done. Add salt and CSS to taste.
Do you mean the notification bar? If so, there is a nice demo and code snippet here.
http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/
Stackoverflow uses Javascript with the JQuery library to create this.
Here are a few jQuery imlpementations of the effect you looking for:
Slide Toggle
Slide Down
Hide
Queue
You will have to build on these.
Related
i modify an hotel theme website on Wordpress, i added a button on the header part and want it to show a simplebooking form that i already have, i just need to know what i have to do to make it work any tutorial please or ideas? now 2 days and still looking for a method to get it done, still searching.
Thanks everyone,
<div class="col-md-7 alignright"><button class="apb-btn" style="margin-top:25px; border-radius:0px !important; background-color:#f3d339 !important;">CHECK AVAILABILITY</button>
$(document).ready(function(){
//you should add class name for link to not target all links with click event
$("a").click(function(){
$(".apb-btn").toggle();
});
});
If you have jquery library you can do this
https://jsfiddle.net/ak7tj4m7/2/
As the title says,I haven't realy started creating the code because I need a little help in here.Im not good at javascript or jquery scripting,I just started learning about html so I only know the basics.Now,getting back on topic.
I want an iframe disapear as soon as it's clicked but as I said I just started scripting.Anyone has any idea ?
Here's how you can do this with plain old JavaScript. Note that clicking the page loaded inside the iframe may not call you event handler which is why I've added a border to this example (clicking the border will execute the event handler). You may need to overlay the iframe with another element and capture the click event on the overlaid element.
<iframe src="http://someurl" onclick="this.style.display = 'none'" style='border: solid 10px red'></iframe>
you can use CSS to do this, give your iframe an id for example call it "iframe_id" like this:- #iframe_id.click{ display:none;}
Edit: as per your comment.
To include jQuery, put the following in your HTML <head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then use this w3schools article to learn how to attach javascript to HTML.
In your Javascript, you can use jQuery like this:
// Run all of the following code when our document is loaded
$( document ).ready(function() {
// Setup an event handler. Says, when we click on an iframe, run this function
$("iframe").on("click",function(){
$(this).remove();//jQuery function to completely remove from DOM
/* OR */
$(this).css("display","none"); //jQuery function that completely hides in CSS
};
});
Since you said you're new to programming HTML, you will want to read and practice JS. Here's an introduction to JS and jQuery.
I wonder if someone can guide me on how to remove the url label that appears at the bottom of the page when you hover over an anchor (I wonder if it's even posible). I've googled a lot and didn't find any answers.
Suppose I have
<a href="www.somepage.com" title="The Page">Link< /a>
in the bottom of the page there will appear a tooltip/label showing "www.somepage.com".
Please see here for an example
Thanks in advance!
You can use either Javascript or JQuery.
For example, you can set to A attribute "href=#" and add an attribute url=www.somepage.com something like this:
Link
If you click over this nothing happen.
Now, you need to apply with javascript or JQuery click event. The next example is using JQuery and Javascript:
At the bottom of page's body:
<script>
$('#link').click(function() {
var url = $(this).attr('url');
window.location.href=url;
});
</script>
If I have this html:
<div id="myDiv"></div>
and this CSS:
#myDiv{
background:url('../images/someImage.png') no-repeat;
background-size:100%;
width:44px;
height:44px;
}
I need to open a new page when the user taps on myDiv. I have an external js file where I have this:
function bindMyDiv(){
$("#myDiv").bind('tap',function(event, ui){
alert("binding");
})
}
But I don't understand where to call this from the HTML, or if this is even the right way to go about this. Advice?
Try
$("#myDiv").live("tap", function(event){
alert('binding');
});
You can place this in side your onReady javascript file
EDIT:
http://jsfiddle.net/R9e6u/
Everyone here provided pretty good insight on different solutions for you to handle your script, but I don't think that anyone stopped to think SHOULD they help improve your script. "or if this is even the right way to go about this ", the answer is no. And perhaps I'm over-simplifying, but with JQM if you're trying to have a div (or any DOM element for that matter) open a new page simply wrap an anchor tag around around it (or in it, whichever is appropriate) and set your href to href="#myNewPage"and the id on the JQM page that you want to load to id="myNewPage"
jQuery Mobile's frame work is set up to automatically inject JS & AJAX into normal HTML elements to provide a smooth UX. While binding a touch event is sometime needed, this situation doesn't warrant that level of code...thats the beauty of jQuery Mobile =).
Examples of when to bind a touch event: show/hide a dom object, trigger a click for a plug-in etc.
You want to call that function on the pageinit event for the page on which it resides. You could use some other page-events from jQuery Mobile like: pagecreate, pageshow, etc. but I think pageinit is your best-bet.
The implementation would look something like this:
$(document).delegate('#page-id', 'pageinit', function () {
$("#myDiv").bind('tap',function(event, ui){
alert("binding");
})
});
OR
$(document).delegate('#page-id', 'pageinit', bindMyDiv);
You would replace #page-id with the ID of the data-role="page" element in which your div resides.
This method is preferred over event delegation for the #myDiv element because binding directly to an element creates less overhead when the event is triggered. If you use event delegation then the event has to bubble-up to the delegation root.
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.