it seems that every thing is fine but when i click on the button my dropdown menu doesn't appear , and i think the reason is that the javascript not working !! the styling file in my css folder and it's working fine
here is my code ..
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/skin.css"/>
<title>Change Directory Content</title>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</head>
<body>
<%#include file="header.jsp" %>
<div id="wrapper">
<div id ="page">
<div id="content">
<div class="box">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<!--End Div -->
<div class="dropdownL">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<br class="clearfix"/>
</div>
<%#include file="footer.jsp" %>
</body>
</html>
any help ?
If you want to do with jquery
enter link description here
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(id) {
$(id).siblings(".dropdown-content").toggle('slow');
}
</script>
Replace button by
Dropdown
Related
Here is code that creates a button that calls a popup:
popup button
This is the code that creates the popup with jQuery Mobile:
<div data-role="popup" id="positionWindow" class="ui-content popup" data-theme="b" data-overlay-theme="a">
Close
<p> Replace the text here depending on which button is pressed </p>
</div>
How do I create multiple buttons that all call the same code used to create the popup and then replace the text inside of the popup depending on the button pressed?
It seems to me fine to use just one popup and dynamically set the content. Instead of use the href in markup, You should open your popup from code:
$(document).on("vclick", "a[data-popup]", function(e) {
var cases = [
"You pressed Button 1",
"You pressed Button 2"
],
id = $(this).data("popup");
$("#msg-block").text(cases[id - 1]);
$("#myPopup").popup("option", "transition", "flow").popup("open");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h2>Header</h2></div>
<div role="main" class="ui-content">
<a class="ui-btn" data-popup="1" href="#">Popup Button 1</a>
<a class="ui-btn" data-popup="2" href="#">Popup Button 2</a>
</div>
<div data-role="popup" id="myPopup" class="ui-content popup" data-theme="b" data-overlay-theme="a">
Close
<p id="msg-block"> Replace the text here depending on which button is pressed </p>
</div>
</div>
</body>
</html>
Explanation: to bind the button to the text message, i am using in my example a custom data-attribute but - if you prefer - you could use just the id of the buttons. Up to you.
I am making a basic blackjack game with angularjs and using bootstrap for the layout however I cannot seem to make it work.
What I want is a heading across the top, the content of the game in the middle and left and a list of current players on the right but isn't everything is running down the page.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blackjack</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="./angular.js"></script>
<script src="./angular-animate.js"></script>
<script src="./angular-touch.js"></script>
<script src="./ui-bootstrap.js"></script>
<script src="./app.js"></script>
</head>
<body ng-app="myApp">
<div class="container-fluid" ng-controller="main">
<div class = "row">
<div class="col-sm-12">
<h1>Black Jack</h1>
</div>
</div>
<div class="row">
<div class = "col-sm-10">
<div ng-include="'play.html'" my-replace>
</div>
<div ng-include="'next.html'" my-replace>
</div>
<div ng-include="'start.html'" my-replace> </div>
</div>
<div class="col-sm-2">
<ul class = "row">
<li class="col-sm-12">
<h2>Players</h2>
</li>
<li class = "col-sm-12" ng-repeat="player in players">
<span>{{player.name}}: <button ng-if="!started" ng-click='removePlayer(player)'>Remove</button></span>
</li>
</ul>
</div>
</div>
</div>
<!--
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> </script>
<script>
div = $("div");
(function add(div){
div.each(function(i, val){
this.innerHTML=this.nodeName+" open "+this.className+" "+this.innerHTML+" "+this . nodeName+" close"
add($(this).children());
})})(div);
</script>
-->
</body>
</html>
The my-replace directive strips away the wrapping div of the ng-includes once their content loads.
The js code at the bottom is a quick debugger so I can see how the html was being interpreted as firebug light doesn't work with angularjs.
I've tried with multiple versions of bootstrap too
Why isn't the bootstrap working?
This is my CSS code. I want to set the display so that my text whats in the div shows up.
div.divi
{display: none}
This is my HTML code.
<!doctype html>
<html lang="nl">
<head>
<title>Over informatica en ik</title>
<meta charset="utf-8">
<link rel="stylesheet" href="opmaak.css">
</head>
<body>
<div class="divi">
<p class="groot">Informatica</p>
<p>hoi</p>
</div>
<button type="button"
onclick="document.getElementByClass('divi').style.display ='block'">
</button>
</body>
</html>
Try this:
div.divi {
display: none
}
<div class="divi">
<p class="groot">Informatica</p>
<p>hoi</p>
</div>
<button type="button" onclick="document.getElementsByClassName('divi')[0].style.display ='block'; this.style.display = 'none';">
</button>
Tell me if it needs improvement :)
Simply replace <div class="divi"> with <div id="divi"> and the CSS with div#divi{display: none}.
Or if you would prefer to keep divi as a class instead of an ID, you can update your code to the following:
<div class="divi">
<button id="div3">
<p class="groot">Informatica</p>
<p>hoi</p>
</div>
<button type="button" onclick="document.getElementsByClassName('divi')[0].style.display='block'">Text</button>
Can someone please tell me why the countdown function is not working properly (the countdown is not starting in the div with the I.D. "countdown"). Probably something real simple, but Javascript isn't my forte. This is the countdown plugin I am using: http://keith-wood.name/countdown.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/web-style-second.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="chrome://mozbar/skin/css/injected.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="content">
<div class="center">
<center>
<div></div>
</center>
</div>
<script type="text/javascript">
$(function() {
$('#countdown').countdown({
until: '14min+20sec',
format: 'MS',
layout: '{mnn}min ' + '{snn}sec ',
onExpiry: function() {
$(".hidden").css("display", "block");
}
});
});
</script>
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 class="hasCountdown" id="countdown">14min 20sec </h4>
</div>
<form name="signupFrm" id="signupFrm" action="#" method="post" class="hidden">
<div>
<div class="yellow_red">
<h1></h1>
</div>
<div class="center">
<a href="https://www.testing.com" class="btn_buy_now">
Get Started</a>
</div>
<input name="submit" value="submit" type="hidden">
<p class="mb_5"> </p>
</div>
</form>
<div class="fnote justify">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You should put the $(function () ...) script into the <head> tag of your HTML page. This way, the countdown will be initiated once the DOM has fully loaded.
I think that the problem is that you are missing the reference to the "jQuery Countdown CSS". In the usage instructions of the plugin it says:
Download and include the jQuery Countdown CSS and JavaScript in the
head section of your page. #import
"jquery.countdown.css";
But you can still make it work without the "jQuery Countdown CSS" if you remove the class attribute from the <h4> element with the id "countdown", like this:
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 id="countdown">14min 20sec </h4>
</div>
JSFiddle Example
The countdown plugin uses the class hasCountdown to test whether the countdown has already been instantiated, so you should use a different class name.
From jquery.countdown.js:
/* Class name added to elements to indicate already configured with countdown.*/
markerClassName: 'hasCountdown'
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.
$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace