How to add an interactive notification badge to my webpage? - javascript

I'm currently working on a website, and I wanted to add a "news" section, which will display an Apple-style notification badge when there is a new article. How to I make it so the badge disappears, after the user clicks on the "news" button, and stays hidden?

To answer your question precisely:
HTML
<ul>
<li>News<span class="badge">2</a></li>
</ul>
Javascript (requires jQuery)
$('.nav').on('click', function(){
$('.badge').hide()
})
It will stay hidden alright. :)

Related

how to know which 'a href' link was clicked from previous webpage?

I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.
Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});

Store user selection with jQuery localStorage

I've got a sticky banner on my site that encourages users' to signup to a newsletter. But it can be annoying, If it constantly appears on a page, Could frustrate the user.
So, I've added a cross to the banner, to close it. What I'd like to do is once its been selected as closed, Store it in some form of localstorage, Check against that and show / hide the banner dependent on whether the user has closed it or not.
Is this possible, If so how would I go about doing it.
Thanks
Yes it is possible and you are thinking on right way.
Here is the DEMO
Assumption HTML and JS
HTML
<div class="sticky">
Do not show on close
</div>
<button class="close">
Close sticky
</button>
JS
$(document).ready(function(){
var localStor=localStorage.getItem("stickyClosed"); //get the localstorage value
if(localStor=="true") //check if its true
$('.sticky').hide(); //hide or remove the sticky element
})
$('.close').on('click',function(){
$('.sticky').remove(); //remove on click of close
localStorage.setItem('stickyClosed','true') //set localstorage value
})

Foundation5 Stop Dropdown from Being clickable

When I hover over the dropdowns on:
Website with Issue
They do not open unless they are clicked. The website is built using Foundation5 (FoundationPress) and I am not able to figure out how to disable this behaviour in favour of having the dropdown appear on hover.
Thanks
Try using the hoverable dropdown options on the menu accessed through the data-options attribute. Similar convention with some of your content below as an example:
Course Locations
<ul id="hover1" class="f-dropdown" data-dropdown-content>
<li>Brampton</li>
<li>Burlington</li>
<li>Hampton</li>
<li>etc.</li>
</ul>
You can set the hover_timout in milliseconds to delay closing after removing your mouse from the area.
Docs for this here: http://foundation.zurb.com/docs/components/dropdown.html

How to replace a Font Awesome icon within link text with a different icon on link click?

I run a Wordpress website that is edited by laypersons with no coding ability. The homepage consists of a list of standard html links (all of which are globally styled by css to resemble a button), the link text of which consists of a Font Awesome icon shortcode and the link title.
[icon name="car"]Link Text
For a user to add another link to the homepage, all they need to do is--while in the Visual Editor--select a Font Awesome icon via the tinyMCE menu, write their link text, and select both the icon and the link text when creating their link via the tinyMCE "create link" button.
The Font Awesome shortcode above results in the actual html being rendered like this:
<i class="fa fa-car"></i>Link Text
My question: when the link is clicked, I would like to have whichever icon is contained within that link to be replaced by the spinning Font Awesome gear/cog icon while the page is transitioning to the link target, thus replacing the link with the following:
<i class="fa fa-cog fa-spin"></i></i>Link Text
I just cannot figure out how to make this happen. I have tried many ways via jQuery but I am just learning this language and cannot seem to figure out how to do it.
In the meantime, I have accomplished a workaround by inserting both icons and using the :focus pseudoclass to show and hide one or the other after the link is clicked, but this solution does not seem to work on mobile and I don't want to have the users have to have to insert both icons each time:
http://jsfiddle.net/qfnzmpzd/
Any solutions that require the individual making the link to manually add a class to the shortcode/html will not work. Thank you all for your help!!
Since you tagged jQuery, you can add a .click() event:
// When a link is clicked
$('a').click(function() {
// If the link contains an icon
if ( $(this).find('.fa').length ) {
// Remove the icon
$(this).find('.fa').remove();
// Prepend the spinner
$(this).prepend('<i class="fa fa-cog fa-spin"></i>');
}
});
Here's a Fiddle.

confirmation message on AngularJS

i am working on a calendar and i have a list of calendars, each one having its own id.
<ul>
<li ng-repeat="calendar in calendars">
<em>{{calendar.calendar_name}}</em>
<a ng-click="deleteCalendar({{calendar.calendar_id}})">Delete</a>
</li>
</ul>
Now this deletes me a calendar. But now i want to create a custom overlay to ask me "Are you sure you want to delete this calendar?" and a Yes and No buttons. Is there an easy way to do this without using the confirmation standard message that javascript provides ?
You can simply create a hidden div that's styled the way you want (probably fixed positioning), then have a function show it when the user clicks the delete button. Then the custom confirmation button in there can reference deleteCalendar().

Categories