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().
Related
Here is how it should work.
I have an application where you have to select a sport activity.
At the moment I have a function setActivityType(String: ActivityName) that is going to set the value in my database. Now what I want to do is when I click on that button is should highlight the clicked button.
I want to do this my searching in the dom the ActivityName passed in before and select it so I can change the style of it.
This is how each sport button is made :
<div class="type" onClick="setActivityType('Volley')">
<i class="fas fa-volleyball-ball"></i>
<p>Volley</p>
</div>
So how could I search for the <p>Volley</p> value?
I figured out to do this with event.target that will get all the dom information and I figured out how to manipulate it afterwards.
All Bootstrap Dropdown menu examples show the items having an link like:
<li>a</li>
How can I make a Bootstrap dropdown menu where choosing an item triggers a javascript method?
(If it makes a difference, the menu items will also be added to the menu using javascript/jquery initially)
Is this just a matter of adding a click function to each <li>? Or does Bootstrap provide special handling for its dropdown items?
If I add a click function, do I still need each item to also have the <a href="#"> tag around the text?
Looks like the answer is:
Bootstrap does not supply any special handling for clicks on its
dropdown menu items; and
I could add a click function to each item in the list; or
I could use event delegation to add the click function to the list
itself, and it will be triggered on each child's click
Thanks to #Pevara and #spaceman for getting me rolling.
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. :)
A confirmation is not bing displaye after all validation has passed, instead it is showing a validation message stating no students have been selected to add even though I have done this. How can I get the confirmation to be displayed?
Here is an application you can use to see and use for yourself:APPLICATION
Select a course from drop down menu
In Avialable Students to Enrol box you will see list of students. Select a student and click on the Add button underneath and you will see that student added into the box underneath.
Click on the Submit Students button at the bottom and it displays the validation message saying you have no selected a student to add to course, but you have done this so the confirmation should appear. This is the problem
The jsfiddle showing the whole code for this is here:
http://jsfiddle.net/PhWbm/3/
You are checking for children of an element with the ID courseadd while the ID you should be looking at is studentadd. Try changing either the ID of the select or the selector.
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