html drop-down button not working - javascript

Can anyone tell me what is wrong with the drop-down button. It is not working in my chrome.
Here is my html code-
<!DOCTYPE html>
<html lang="en">
<head>
<title>IconMaker</title>
<meta charset=utf-8">
<meta name= "viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My Bootstrap Page</h1>
<p>Resize the page to understand Responsiveness</p>
</div>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Post Ideas
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Work 1</li>
<li>Work 2</li>
<li>Work 3</li>
<li>Work 4</li>
</ul>
</div>
<div class="row">
<div class="col-sm-2">
<p>If you want to use Paypal</p>
<i class="fa fa-cc-paypal" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Mastercard</p>
<i class="fa fa-cc-mastercard" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Visa</p>
<i class="fa fa-cc-visa" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use Google Wallet</p>
<i class="fa fa-google-wallet" style="font-size:36px"></i>
</div>
<div class="col-sm-2">
<p>If you want to use American Express</p>
<i class="fa fa-cc-amex" style="font-size:36px"></i>
</div>
</div>
</div>
</body>
</html>
when I click on drop-down, nothing drops down. I see no errors on my console.I have added bootstrap.js in html. Does i have to use JavaScript file for that?

Use this link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
instead of
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Cuz you use version 4.0.0-beta in css and another version in javascript

You forgot to add the below css
.show > .dropdown-menu {
display: block;
}

Related

innerHTML not changing text on browser in Materialize

innerHTML is working on console and it's changing the text in anchor tag but the in display on browser, it is not changing. I gave tag for login an id of "changeIt" and then retrieved the ID by using getElementByID(); function and at last changed the text of that. I did the same in case of tag without any use of Materialize and it was working. Does DOM does not work with materialize CSS framework?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Skynet | Live courses from Universites</title>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function init() {
var name = document.getElementById("changeIt");
console.log("blah");
name.innerHTML = "Alex";
console.log(name);
}
window.onload = init;
</script>
<!-- NAVIGATION BAR -->
<div>
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<i class="material-icons left">account_balance</i>Skynet
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Become a Creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login"><i class="material-icons right">person</i>Login</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Become a creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login" id="changeIt"><i class="material-icons">person</i>Login</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!--LOGIN POP-UP CONTENT-->
<div id="login" class="modal">
<div class="modal-content modal-close">
<h4 class="header center-align">Skynet</h4>
<p class="flow-text center-align">Sign in to Skynet with</p>
<div class="center-btn">
<i class="ion-social-google left"></i>Google
</div>
</div>
</div>
</body>
</html>
After running this the value in console is changing -
blah
<a class="modal-trigger" href="#login" id="changeIt">Alex</a>
By using this -
$(document).ready(function() {
$('#change').text("Alex");
});

removeClass doesn't work when clicking a button

I have a problem with removing classes when clicking a button. I use jQuery and want to use removeClass('details') to remove it, but it still doesn't work. Do you have any idea for it? The solution was provided and I updated the code. See the answer below. Just put $(this).prev().closest('.details').remove(); before $(this).remove();.
$(document).ready(function() {
$('ul').on('click', 'button', function(){
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked the offer travel!</li></ol>');
$(this).closest('.tour').append(message);
$(this).remove();
// this doesn't remove a class details
//$(this).removeClass('details');
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GuidedTours</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>Guided Tours</h2>
<hr>
<div id="tours" class="card">
<ul class="list-group list-group-flush">
<li class="usa tour list-group-item"; data-discount="299">
<h3>New York, New York</h3>
<span class="details badge badge-success">$1,899 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="europe tour list-group-item" data-discount="176">
<h3>Paris, France</h3>
<span class="details badge badge-success">$2,299 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="asia tour list-group-item" data-discount="349">
<h3>Tokyo, Japan</h3>
<span class="details badge badge-success">$3,799 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
</ul>
</div>
</div>
<!-- Scripts -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="guidedtours.js"></script>
</body>
</html>
The this refers to the button and not the span. You have to use .prev():
$(this) // is button
.prev() // this is span
.removeClass('details');
$(document).ready(function() {
$('ul').on('click', 'button', function(){
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked the offer travel!</li></ol>');
$(this).closest('.tour').append(message);
$(this).remove();
// this doesn't remove a class details
$(this) // is button
.prev() // this is span
.removeClass('details');
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GuidedTours</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>Guided Tours</h2>
<hr>
<div id="tours" class="card">
<ul class="list-group list-group-flush">
<li class="usa tour list-group-item"; data-discount="299">
<h3>New York, New York</h3>
<span class="details badge badge-success">$1,899 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="europe tour list-group-item" data-discount="176">
<h3>Paris, France</h3>
<span class="details badge badge-success">$2,299 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="asia tour list-group-item" data-discount="349">
<h3>Tokyo, Japan</h3>
<span class="details badge badge-success">$3,799 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
</ul>
</div>
</div>
<!-- Scripts -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="guidedtours.js"></script>
</body>
</html>

Make div disappear when list from drop down menu is selected

I made a dropdown menu when users are on iphone 6plus and lower and the drop down menu works fine but, when you click like "jobs or contact" it opens up but the drop down menu stays there. How do I make it "hide" after a list item is clicked in the iPhone 6plus width and lower. I have the drop down menu set with a toggle function so that might help understand it better.
Demo :
http://codepen.io/anon/pen/VpyNwa
Html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
</head>
<body>
<!-- Section for Jobs Popup -->
<div id="top-bar">
<a id="burger-nav"></a>
<ul id="nav-menu" class="blah">
<li id="job" class="testAgain">Job</li>
<li id="contact" class="testAgain">Contact</li>
<li id="press" class="testAgain">Press</li>
<li id="legal" class="testAgain">Legal</li>
<li id="support" class="testAgain">Support</li>
</ul>
<!--<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div> -->
</div>
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
Any help is appreciated
</html>
Try adding this in your JS:
$('.testAgain').click(function(){ $('.blah').removeClass('open') })

Bootstrap glyphicon error: square instead of icon

Im trying to build responsive website. To do that, Im using Bootstrap 3. I have downloaded Bootstrap 3 and imported to my website root directory:
I don't know why, but on small screen it doesn't show my icon:
My code:
<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="../bootstrap-3.2.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/styles.css">
<script src="../js/jquery-2.1.1.js"></script>
<script src="../bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script src="../js/script.js"></script>
<title>
title
</title>
</head>
<body>
<header class="top" role="header">
<div class="container">
<a href="../aplikacija/app.html" class="navbar-brand pull-left">
Application
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li>APP</li>
<li>UX</li>
</ul>
</nav>
</div>
</header>
<div id="app" class="content">
</div>
</body>
</html>
Your glyphicon span should have the following class: glyphicon glyphicon-align-justify as opposed to just glyphicon-align-justify
I would suggest not using align justify in the span as a class - just display the glyphicon and then justify it in an outside div.
<div class="text-justify">
<span class="glyphicon glyphicon-align-justify"></span>
</div>
here is some more info - http://getbootstrap.com/components/#glyphicons-how-to-use

GoodMap API3 with PhoneGap

I work on application in which i need map i worked in map module and in browser it shows correct result but as it is an mobile application so i run it into emulator and the following error occues
Uncaught TypeError: object is not a function at file:///android_asset/www/nav-map.html:3
my html file Nav-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<script src="js/hsmain.min.js"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" />
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.mode.datebox.js"></script>
<script src="js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="lib/work-space.js"></script>
<script src="lib/config.js"></script>
<script src="lib/userprofile.js"></script>
<script src="lib/loginlogout.js"></script>
<script src="lib/binder.js"></script>
<script src="lib/newsfeed.js"></script>
<script src="lib/harvestdata.js"></script>
<script src="lib/members.js"></script>
<script src="lib/pictures.js"></script>
<script src="lib/properties.js"></script>
<script src="lib/clubnewsfeeds.js"></script>
<script src="lib/jsutility.js"></script>
<script src="lib/weather.js"></script>
<script src="lib/groups.js"></script>
<script src="lib/groupnewsfeeds.js"></script>
<script src="lib/companies.js"></script>
<script src="lib/companynewsfeeds.js"></script>
<script src="lib/map.js"></script>
<script src="lib/searching.js"></script>
<script src="lib/notitfications.js"></script>
<link href="960/jquery-mobile-fluid960.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
#map-canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="ClubMapPage">
<!--header-->
<script>$('#ClubMapPage').on('pageshow',function(){
UserProfile.loadProfile();
Notifications.getTopNotification();
Properties.getClubNameAndImage();
Map.getMap();
})
</script>
<div id="landing-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="container_12 padding5">
<div class="grid_1">
<span class="inline-button floatleft">Back</span>
</div>
<div class="grid_10">
<div class="hs-icon-wrap">
<span class="dropdown inline-button"><a class="hs-request dropdown-toggle showRequestsBtn" data-toggle="dropdown" data-role="button" href="#messages" data-iconpos="notext" >Requests</a>
</span>
<span class="dropdown inline-button"><a class="hs-notification dropdown-toggle showNotificationsBtn" data-role="button" href="#" data-toggle="dropdown" data-iconpos="notext" >Notifications</a>
</span>
</div>
</div>
<div class="grid_1">
<span class="inline-button floatright">Right</span>
</div>
</div>
</div>
<!--contents-->
<div data-role="content" class="hs-content">
<div class="hs-notifications-menu-contents-wrap feeds-content-header HSnotifications">
<div class="hs-notification-menu-heading">
Notifications
<a title="Remove" class="removebutton hideNotificationsBtn" href="javascript://" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" >
<ul class="hs-notificatin-list notificationul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- End Of Notifications -->
<div class=" hs-notifications-menu-contents-wrap feeds-content-header HSrequests" >
<div class="hs-notification-menu-heading">
Requests
<a title="Remove" class="removebutton hideRequestsBtn" href="#" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" style="">
<ul class="hs-notificatin-list requestul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- end of requests -->
<div class="container_12">
<div class="content-header">
<h4><img class="smallClubImage" alt="" src="images/header-small-image.png" /></h4>
Info
<div data-role="navbar" class="nav-glyphish-example" data-grid="c">
<ul>
<li class="no-border">Members</li>
<li class="active">Map</li>
<li>Harvest</li>
<li><a href="clubpages/albums.html" id="nav-picture" data-icon="custom" >Picture</a></li>
</ul>
</div>
</div>
<div class="content-wrap map-wrap">
<div id="map-canvas" style="height:500px; width:100%; margin:0; padding:0">
</div>
</div>
</div>
</div>
</div>
I had the same error but I solved it two months ago!
I was because a jquery plugin of mine was not ending in ;
You can Try to end your JS lines with ; I can see you don't follow this best practices advice. So, add it to you own js files (at the end) in order to let the files concatenation understand That a new file is really a new single function (or statement)
Sorry If this is not the solution to your problem! Thank you for reading
Hi there is some problem with your class names you put the class names same as some keywords like Image you cannot put Image as a class name also check if other same problem exist i think you should check by using some IDE it will shows the special names in different color.
also change the class name Map
I had the same error once i think it will help you
Thanks

Categories