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
})
Related
I want my sidebar button to change color when I visit the page it navigates to.
I had this problem before and :active didn't help that much because it returns to its original css once I click other part in my page.
What you should do is create a class for your selected navbar button
.current_active_navbar {
background-color: $main-red;
}
then in your js, create a condition that will apply the .current_active_navbar to navbar based on your current URL. You can get your current URL through this window.location.href
So let's say your current url is localhost:3000/timer then you can have your condition like this
if(window.location.href.split("/")[3] === "timer")
I am not too good with CSS myself, but this does a pretty good job of explaining it.
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
}
});
Say I have a left-side chat bar with chat users. Each user has their image (much like Facebook's chat)and is clickable to open a chat box to start chatting away.
Here's my code:
$('.msg_wrap').hide();
$('.msg_box').hide();
$('.chat_user').click(function() {
$('.msg_wrap').show();
$('.msg_box').show();
}
I know this is wrong but what I want to do here is when the page loads for the first time, all the chatboxes to be hidden (hide ()). It is not until I click on a chat user (.chat_user) that a pop up/chat box appears (show()). How do I fix this code? Do I have to create a function?
A quick thought on a solution.
First. Set the elements ('.msg_wrap') and ('.msg_box') to hidden in your html and kill your first two lines of code. I am not sure what those elements specifically are, but, for example, if they were div tags it would look something like:
<div hidden class="msg_wrap">
Second. I am not sure if you are saying that the code currently isn't working on page load. It looks like you are missing a ) at the end and also you can update to the following so that it gets executed on page load.
$(function(){
$('.chat_user').click(function() {
$('.msg_wrap').show();
$('.msg_box').show();
});
});
This is jquery shorthand for $( document ).ready().
Also, if you want the msg_wrap and msg_box elements to toggle between being hidden and shown you can use the toggle() method instead of show().
I am a programmer in rails and I am trying to create a pop up when a link is hovered.
In my project I am looping through an array and displaying different users (eg user image, user name etc). I want a situation whereby when you put your cursor on the user name (which is a link) a pop-up window will show for only that user.
I searched some other sites and I got some javascript ideas which I placed below. But my problem with the code is that when I place the cursor on one user name (which is a link and has the link div) all the pop-up divs from every other user will show instead of just that user name link.
Please what can I do?
$('#link').hover(function(e) {
$('div#pop-up').show();
//.css('top', e.pageY + moveDown)
//.css('left', e.pageX + moveLeft)
//.appendTo('body');
}, function() {
$('div#pop-up').hide();
});
html
<%= for update in #updates%>
<div id="link-pop" style="display:none"><%=update.user_type%></div>
<div id="content">
<%= update.user_name%>
</div>
<%end%>
All the pop-up divs from every other user will show instead of just that user name link.
Well, this is because you're calling all popups $('div#pop-up').show();.
If you need to only show a popup relative to that link you can either select it by index() or if it's children of #link then something like $(this).find('#popup') will work.
What's your HTML? Probably you have couple of divs with the same id.
with the html like:
some text
<div style="display:hidden">user info</div>
the problem with your code is the id. An id, from what i know should be unique in page so it raises problems...
edit
You say you want a popup like in facebook right, so here goes some pseudo-code (as I'm not expert in ruby):
You should have and array of objects or some kind of data type containing your info.
When generating your html you should have something like this:
while(users)
print "user->name
<div class="hidden-user-info">
<img src="user->photo" alt="some description">
<span>user->name</span>
etc...
</div>
Again this is pseudo-code... The css should look like this:
.hiden-user-info{display:none;position:relative;z-index:20;}
The solution above should be used if you are presenting all user links when generating your html code.
If you're dynamically creating it, it may have to evolve some kind of ajax call or dom manipulation with jquery.
Without proper code or link it's hard to help more... Sorry
I would like to get users to sign up to my email newsletter without using annoying popups.
I discovered a scroll-activated JQuery slide that I think will work well.
Here is the test example I created: (scroll down to activate it)
http://buckinvestor.com/test/jquerytest.html
Now here is the problem: I don't want to annoy users by constantly having this slide down on each page.
How do I add a "Close" button to the slide?
How do I ensure that the user doesn't see the slide again after they click close? (perhaps a cookie that stays active for 7 days or something?, not sure how that works, but if you provide me some guidance, I'll figure it out).
Thank you everyone - StackOverflow has been such a lifesaver!
Easy
you just need to hide the DIV
in this example add a button or image and use the live('click',function(){})
$('#closediv').live('click',function(){
$('#headerSlideContainer').hide();})
as for the second part of the question yes cookie
For #1, just add a button and
$("button.hide").click(function(event){ $("div.hidethis").hide() });
onclick to hide the div that is the slide thing.
Add a <a> or <button> or something for the close button inside of the #headerSlideContent <div>
Add a on click or similar to the button inside your load function:
$('#closeButton').click(function(){
$('#headerSlideContainer').hide();
});
http://api.jquery.com/hide/
For part 2, yes a cookie is good, I found the jQuery cookie plugin to be helpful: http://plugins.jquery.com/project/Cookie
Set the cookie: $.cookie("name", "value");
Read the cookie: var value = $.cookie("name");