I am trying to use Foundation to get the reveal modal to work. When I click on the link below, nothing happens. When I load the page, the content in the modal is displayed, but it looks very strange.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script src="js/app.js"></script>
<script>
$('#myModal').foundation('open')
</script>
</body>
</html>
Are you using Foundation 6 examples?
Instead of data-reveal-id, use data-open or data-toggle to target your reveal:
Click Me For A Modal
Click Me For A Modal
Related
for some reason I my index.html does not read the style.css. It is linked though. what is the issue ? I added the type, I did add the right path I think.
thank you
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Main Start-->
<div class='main'>
<!--Home Section Start-->
<section class='home-section'>
<div class='container'>
< div class ='row'>
<div class='home-text'>
<p> </p>
<h1> </h1>
<h2></h2>
</div>
<div class='home-img'></div>
</div>
</div>
</section>
<!-- Home Section End-->
</div>
<!--Main End-->
<script src="js/script.js"></script>
</body>
</html>
Issue solved, it was that I forgot one root variable.
Just Try :
<html>
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<!-- Here Head Content-->
</head>
<body>
<!-- Here Body Content-->
</body>
<html>
But also after you added screenshot for your CSS File you said in previous
answer that it the problem was from the CSS File not the linking (That mean if
there is something wrong with your CSS File the whole file not work)
One possible cause of such problems are browser cache.
If you are on windows, try running ctrl+f5 to reload the page.
Every thing is correct whith you, the only thing that may be wrong is that the css file is not in the same folder with the index, for no reason, also try removing type="text/css",it may work.
I have followed the instructions in installing semantic from Semantic-ui.com. I successfully installed semantic in my project folder and build using gulp
and I have my files in semantic/dist folder
I have the code in index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Semantic UI</title>
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
</head>
<body>
<header>Semantic ui</header>
<div class="ui sidebar vertical left inverted menu">
Monday
Tuesday
Wednesday
Thursday
Friday
</div>
<div class="ui basic icon top fixed menu">
<a id="toggle" class="item">
<i class="sidebar icon"></i>
Menu
</a>
</div>
<div class="pusher">
jflkjf f lekjflke fsdf s;lfks; kf;skvm ;sl;lfsdk g;ldkgl;ksd
</div>
<script>
$("#toggle").click(function(){
$(".ui.sidebar").toggle();
});
</script>
</body>
</html>
When I open index.html in my browser, I see the styling fine on my page but when I click on my menu I don't see anything firing. The dates don't show up. Can anybody tell me what I am missing?
just include jquery before semantic css
I have a JSP page which contain the whole modal say modal structure (header,body and footer).
The page is like below
<% # page language = "java" contentType = "text/html; charset=ISO-8859-1"
pageEncoding = "ISO-8859-1"
%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
And I also have another JSP page where on clicking on a button Open Modal, the modal with ID myModal store in the above JSP page will be open.The current page will be intact, additionally a modal popup will be open on it.
Here is The Page from where I'll call the modal
<% # page language = "java" contentType = "text/html; charset=ISO-8859-1"
pageEncoding = "ISO-8859-1"
%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
</body>
</html>
How I get this?
If the modal's HTML isn't rendered on the page you cannot do it without ajax. You would need to create an ajax function which will get only modal's HTML code and put it somewhere in the current body (using jquery's append probably), and then you can show it.
First of all, your moal code would need to be just a div and stuff, you don't want to try and include a whole other html document inside your code.
You'd want to include that file, either via import or include into the scope of your page you want to use the modal on, then in js, do $("#myModal").modal('show')
I'm trying to create a file browser app.Here on click of a folder should be inserted into the text box provided.
Suppose if I click on app folder,I want the /app folder to be inserted into the provided text box.I've followed this URL in order to make this file browser app.
My template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Browser</title>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/app.css">
</head>
<body>
<div id="panelDiv">
<div class="panel-heading">
<button type="button" id="butDiv" >Browse</button>
<input type="text" name="location"/>
<span class="up">
<i class="fa fa-level-up"></i> Up
</span>
</div>
<div id="showDiv" class="panel-body">
<table class="linksholder">
</table>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/datatable/js/jquery.datatables.min.js"></script>
<script src="/lib/app.js"></script>
<script>
$(document).ready(function(){
$("#butDiv").click(function(){
$("#showDiv").toggle();
});
});
</script>
</body>
</html>
Can anyone please suggest me regarding this issue ...
Since you're using jquery already I would say the easiest would set the jquery event click for the folders to select the text input element and use the .val () function to set your new value so it would look something like this
$(".folder selector").click (function (){
$(".textbox selector").val ("/"+this.text());
});
I'm not sure if the value function works on input elements but if not you could change it to a <textarea></textarea>
I'm building an app in html/css/javascript and using phonegap to build.
So, I first wanted to have to simple page to page navigation. I tryed this:
index:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
<a rel="external" data-role="button" href="test.html" data-transition="slide">click me</a>
</div>
</body>
</html>
test.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
New page!
</div>
</body>
</html>
Result: when I click on the button the test.html page loads very slow and the data-transition="slide" seems to be ignored.
I found an article about dynamic page loading: https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1?lang=en
Which I really don't get. Aren't the HTML files stored locally? So why do a XMLHtppRequest?
My question is: How do I get a good page transition (fast and with effects)?
You should remove rel="external" from your <a> link.
The attribute rel="external" disables the Ajax navigation, skipping the transition effect, and refreshes your page test.html.
Try your code after removing it.
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
<!-- REMOVE THE ATTRIBUTE REL="EXTERNAL" FROM THE LINK -->
<a data-role="button" href="test.html" data-transition="slide">click me</a>
</div>
</body>
</html>
test.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.js"></script>
<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body id="body">
<div id="container" data-role="page">
New page!
</div>
</body>
</html>
Let me know about your results.
Try this solution by Piotr Walczyszyn. Highly recommended for anyone using Jquery mobile and Phonegap together.