I have kept notification button in my header.
When user click Get notified then it should replace by message Notified successfully
CODEPEN: CODEPEN
HTML
<li style="display:none" id="l1">Notified soccessfully ..
</li>
<li><a style="display:block" id="l2" href="#about">Email</a>
</li>
<li>
<div id="input-collection" class="input-group input-group-lg left-input-group">
JS
function notify()
{
alert("hi");
document.getElementById("l2").dispaly='none';
document.getElementById("input-collection").dispaly='none';
document.getElementById("l1").dispaly='block';
}
In codepen, donno what is the issue with my code.
IT should be display not dispaly and you should provide .style
function notify()
{
alert("hi");
document.getElementById("l2").style.display='none'; // Changed
document.getElementById("input-collection").style.display='none'; // Changed
document.getElementById("l1").style.display='block'; // Changed
}
Code Pen
Related
I'm fairly new to Angular and need to solve what seems to be a simple problem: show an alert or confirmation message on navigating between tabs in angular bootstrap. the issue is when moving to another tab, the tab will open first and then show an alert message if clicked on cancel it will back to the previous tab, what I want simply is to not leave the current tab until click on confirmation to leave.
<ul ngbNav #navWithIcons="ngbNav" [(activeId)]="activeTab" class="nav-tabs">
<li ngbNavItem="docs">
<a ngbNavLink (click)="navigateTab('docs')">
<span [data-feather]="'file-text'"></span>Documents</a>
<ng-template ngbNavContent>
<p>
any content
</p>
</ng-template>
</li>
<li ngbNavItem="external">
<a ngbNavLink (click)="navigateTab('external')">
<span [data-feather]="'chrome'"></span> External
Resource</a>
<ng-template ngbNavContent>
<p>
any external link
</p>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="navWithIcons" class="mt-2"></div>
TS:
navigateTab(navTab: string) {
if (navTab != this.currentTab) {
if (this.isInputUpdated) {//if there is an update on the current tab inputs then
this.confirmationMessage(true, this.currentTab);
this.isInputUpdated = false;
}
this.currentTab = navTab;
}
}
You can listen to navChange event on the ngbNav element and stop the event from propagating
<ul ngbNav #navWithIcons="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (navChange)="navChanged($event)">
...
</ul>
navChanged(event) {
event.preventDefault()
}
Inside the confirmationMessage method, if clicked on confirm set active tab with the value of currentTab
I have this code:
<input id="ville" placeholder="Enter a city">
<ul class="suggestions">
<li data-vicopo="#ville">
<strong data-vicopo-code-postal></strong>
<span data-vicopo-ville></span>
</li>
</ul>
<script src="https://vicopo.selfbuild.fr/api.js"></script>
$(document).on('click', '.suggestions li', function () {
$('#ville').val(
$(this).find('[data-vicopo-code-postal]').text()
);
});
When I click on my chosen city, the list of suggested cities do not disapear. What easy fix can I do so that when clicking, the display of suggestions close or hide?
Thanks
Insert the below code to always show the suggestions list after you have hidden with .hide().
The user can click back into the input field and start typing which will then show the list again, or by clicking on it.
$('#ville').on('click keyup', function() {
$('.suggestions').show();
})
Hi Guys i have a small problem,
i have a click event on a settings icon but the settings icon is inside a link so when i click the icon the click event is called but i cant see anything because i getting redirected to the next page so i need a way to click the icon without firing the link
<template name="startseite">
<div id="viewport">
{{#each gebiet}}
<div id="viewmode">
this is the link--> <a id="link" href="/straßen/{{this._id}}">
<div id="gebietsCard">
<ul id="gebieteListe">
and here the icon --> <li id="settings"><i id="setting" class="material-icons md-24 md-light">settings</i></li>
<li id="überschrift">{{Gebietsname}}</li>
<li>{{Gebietsnummer}}</li>
<li>{{Ort}}</li>
</ul>
</div>
</a>
</div>
<div id="editmode">
<div id="gebietsCardEdit">
test
</div>
</div>
{{/each}}
</div>
</template>
my js:
Template.startseite.events({
'click #settings': function(){
console.log("geklickt")
$("#editmode").css('display', 'inline');
$("#viewmode").css('display', 'none');
}
});
I hope you can help me thanks Guys ;)
This could be done easily with:
Template.startseite.events({
'click #settings': function(e){
e.stopPropagation();
e.preventDefault(); // I am not sure if this is needed, try it yourself and remove if it is no use
$("#editmode").css('display', 'inline');
$("#viewmode").css('display', 'none');
}
}
You can find more information regarding these two functions here:
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
Here I need to click on a thumbnail, so that it will show the details on other page, it should show the details of that particular thumb only. I used xml file here to fetch the data and display thumbnail. I am unable to pass the values to other page and open it at the same time onclick event. pls help
<div class="container-page">
<div class="row" id="portfolio">
<div class="col-md-2">
<nav>
<ul class="nav nav-pills nav-stacked" id="test">
<li role="presentation" class="active">Services</li>
<li role="presentation">Desktop</li>
<li role="presentation">Web</li>
<li role="presentation">Mobile</li>
<li role="presentation">Design</li>
</ul>
</nav>
</div>
<div class="col-md-10">
<div class="row" id="thumb">
</div>
</div>
</div>
</div>
<!-- js -->
$.ajax({
type:"GET",
url:"portfolio.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('thumbnail').each(function()
{
var $thumbnail=$(this);
var type=$thumbnail.find('type').text();
var descr=$thumbnail.find('description').text();
var title=$thumbnail.attr('title');
var imageurl=$thumbnail.attr('imageurl');
var thum='<div class="col-xs-6 col-md-3"> </div>';
thum=$(thum).appendTo("#thumb");
thum = $('').appendTo(thum);
var thumName = $('<div class="thumTitle"></div>').appendTo(thum);
$('<h2>'+title+'</h2>').appendTo(thumName);
$('<p>'+type+'</p>').appendTo(thumName)
thum = $('<img src="'+imageurl+'" alt="image" class="thumbImgSize imgSlide">').appendTo(thum);
$(".forHove").mouseup(function()
{
//here is the redirection code, and want to pass $thumbnail to testxml.html page
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
});
}
});
Well, one of the alternative is using Web Storage API.
Just store img html and use it.
// use 'click' instead of 'mouseup'
$(".forHove").click(function()
{
// store image html to sessionStorage
window.sessionStorage.image_data = $thumbnail.clone().wrapAll("<div>").parent().html();
window.location="http://www.bookmane.in/skillworks/testxml.html";
$(thum).appendTo(".s");
});
// in http://www.bookmane.in/skillworks/testxml.html
// You have data sotred and insert it somewhere
$(document.body).append(window.sessionStorage.image_data);
You can achieve this thing using the following steps:
Add a form tag like
<form action="YOUR_PATH" method="GET">
<a class="thubnailClick" href="#" >
<html_of_your_thumbnail>
<input type="text" name="NAME_OF_PARAMETER" />
</a>
</form>
Now override the click event of <a> tag with
$(document).ready(function() {
$(".thubnailClick").on('click', function(event) {
// to override the default behavior of <a> tag.
preventDefault();
// Find the form element using closest() of jQuery.
// Call submit event of that form using $(form_element).submit();
});
})
Now on the other page you can get parameter from URL using location.search or follow:
Getting Query params using JavaScript
Now use these Params according to your needs.
onmouseOver of eacuser i want to show the change password as a dropdown(as can seen in attached image) but with my code changes i am getting change password next to eacuser link.Can anyone please give me some hint how to achieve.I attached the two image file.please check for reference
<div id="appLinks">
<ul id="appLinks_list" class="nav">
<span id="appLink_csrname" class="ui-state-default csrname"><a onmouseover="onMouseOver()">eacuser</span>
<li id="appLink_chngpwd" class="ui-state-default chngpwd">Change Password</li>
<li id="appLink_about" rtlOrder="3"><img src="${link.getContextPath()}${msg.get("icon.information")}" border="0px;" align="top">About</li>
<li id="appLink_logout" rtlOrder="2"><img src="${link.getContextPath()}${msg.get("icon.logout")}" border="0px;" align="top">LogOut</li>
<li id="appLink_help" rtlOrder="1"><a target="eachelp" href="$msg.get("eac.helpPath")"><img src="${link.getContextPath()}${msg.get("icon.help")}" border="0px;" align="top">Help</a></li>
</span>
</ul>
</div>
<script>
$(document).ready(function(){
$(".csrname").mouseleave(function(){
//$('#appLink_chngpwd').hide();
$(".csrname li").css("display","none");
});
$(".csrname").mouseover(function(){
//$('#appLink_chngpwd').show();
$(".csrname li").css("display","block");
});
</script>
use this,
<script>
$(document).ready(function(){
$('#appLink_chngpwd').hide();
$(".csrname").mouseover(function(){
$('#appLink_chngpwd').show();
});
$(".csrname").mouseleave(function(){
$('#appLink_chngpwd').hide();
});
});
</script>
In your code you have used like below.
$(".csrname li").css("display","none");
It means you are making display none for child property of span having class .csrname
At present in your code, "Change Password" is sibling element not a child.
So change your code like below.
$(".csrname + li#appLink_chngpwd").css("display","none");