I am following this guideline to create a responsive navbar that, according to the dimension of the screen, will show its elements in a dropdown list (instead of an inline, used for bigger screens).
Below the relevant part of the HTML (replaced some useless parts with "..." to improve and speed-up readability)
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="javascript" href="{% static 'javascript/responsive.js' %}">
</head>
<body>
{% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
{% block content %}<!-- default content text (typically empty) -->
<!-- Main Logo -->
<div class="main-image" id="myMainImage">
<img src="{{STATIC_URL}}/static/images/logo.png"/>
</div>
<!-- Navigation Bar -->
<div class="topnav" id="myTopnav">
<a href Home
<a href="http://www...</a></li>
Storia di Gabriella</li>
Video Gallery</li>
Photo Gallery</li>
Dicono di Noi</li>
Come Contattarci</li>
<input type="text" placeholder="Ricerca..">
☰
</div>
in the static folder (mysite/articles/static) I have created a javascript folder with a responsive.js file inside it
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function respScreen() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
and, finally, I have filled up the styles.css (in mysite/articles/static/css), below the relevant part
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home").
Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
I cannot understand why, despite following exactly the guide linked, when I zoom in the page the navbar does not compact itself (instead, its elements tends to overlap each other).
EDIT1: I tried to copy the code from the tutorial here in Pycharm and run it in my local Django server and it does not work. It seems to be an issue of configuration.
Below the static path from the settings.py
STATIC_URL = '/static/'
If I can provide you with more information, please ask.
EDIT2: Console log below (CTRL + SHIFT + J in Firefox):
unreachable code after return statement aU73Q4U9JMQ.js:1028:375
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. hscv
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. hscv
Attempt to set a forbidden header was denied: Connection 1588510866-lcs_client_bin.js:99:385
Attempt to set a forbidden header was denied: Connection 1588510866-lcs_client_bin.js:99:385
EDIT3: If you want to see the full project to review the other Django files, it is stored in this Github repository.
Resolved inserting a script tag in the html with the javascript function as follow
<script>
function respScreen() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Related
I am learning a little about SPA.
I wanted to make a simple page where in the main index_test0.html file I have a "content" div.
<html>
<head>
<meta charset="utf-8">
<title>Navigation Example</title>
<!-- The CSS theme for the site. -->
<link rel="stylesheet" href="theme.css" />
<!-- Include jQuery. -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<!-- Navigation links -->
<div id="navbar">
Home
About
</div>
<!-- Dynamic content will be placed here by JavaScript. -->
<div id="content"></div>
<!-- The JavaScript code for dynamic behavior. -->
</body>
</html>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
/* Style the navigation bar links. */
#navbar a {
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
margin: 0px 10px 0px 10px;
padding: 0px 8px 0px 8px;
color: black;
text-decoration: none;
border: 2px solid;
border-color: white;
border-radius: 20px;
}
/* Give the user an affordance that each link is clickable. */
#navbar a:hover {
border-color: black;
}
/* Style the active page link. */
#navbar a.active{
border-color: gray;
}
</style>
<script>
// This script implements simple routing by loading partial HTML files
// named corresponding to fragment identifiers.
//
// By Curran Kelleher October 2014
// Wrap everything in an immediately invoked function expression,
// so no global variables are introduced.
(function () {
// Stores the cached partial HTML pages.
// Keys correspond to fragment identifiers.
// Values are the text content of each loaded partial HTML file.
var partialsCache = {}
// Gets the appropriate content for the given fragment identifier.
// This function implements a simple cache.
function getContent(fragmentId, callback){
// If the page has been fetched before,
if(partialsCache[fragmentId]) {
// pass the previously fetched content to the callback.
callback(partialsCache[fragmentId]);
} else {
// If the page has not been fetched before, fetch it.
$.get(fragmentId + ".html", function (content) {
// Store the fetched content in the cache.
partialsCache[fragmentId] = content;
// Pass the newly fetched content to the callback.
callback(content);
});
}
}
// Sets the "active" class on the active navigation link.
function setActiveLink(fragmentId){
$("#navbar a").each(function (i, linkElement) {
var link = $(linkElement),
pageName = link.attr("href").substr(1);
if(pageName === fragmentId) {
link.attr("class", "active");
} else {
link.removeAttr("class");
}
});
}
// Updates dynamic content based on the fragment identifier.
function navigate(){
// Isolate the fragment identifier using substr.
// This gets rid of the "#" character.
var fragmentId = location.hash.substr(1);
// Set the "content" div innerHTML based on the fragment identifier.
getContent(fragmentId, function (content) {
$("#content").html(content);
});
// Toggle the "active" class on the link currently navigated to.
setActiveLink(fragmentId);
}
// If no fragment identifier is provided,
if(!location.hash) {
// default to #home.
location.hash = "#index_test1";
}
// Navigate once to the initial fragment identifier.
navigate();
// Navigate whenever the fragment identifier value changes.
$(window).bind('hashchange', navigate);
}());
</script>
After pressing the buttons from the menu, the content from the external files should be loaded.
However, I wanted to check if I can load both static content in this way, as in the index_test1.html file:
<html>
<div id="internal_content">
HOME
</div>
<html>
as well as dynamic content, the script of which is stored in an external file - index_test2.html:
<html>
<div id="internal_content"></div>
<html>
<script>
var c = document.getElementById("internal_content");
c.innerText = "ABOUT";
</script>
I think it works.
The problem is that I can't see these 2 external files in my Chrome debug window, so I can't debug the script in index_test2.html.
What should I do?. Or should I make it differently?
you can see those javascript request in development tool's network tab. search specific file name (js file name) on filter. then click request. It will take you to specific js file and can do debug.
I have a page that has 2 sliders; 1 for mobile devices & tablets (smaller than 500px screen width) and one for desktops (larger than 500px screen width). I am using CSS (display: block, display:none) attributes to display them accordingly, however, the browser is downloading the images of both sliders. I need a Javascript code that can;
Identify the screen width
Remove the desktop slider div by CSS class if the screen width is smaller or equal to 500px,
Remove the mobile slider div by CSS class if the screen width is larger than 500px.
I cannot use JQuery because of some issues we have with the library and the way the website is designed (long story).
Here are the HTML elements;
<div class="show-desktop">
[rev_slider alias="slider"][/rev_slider]
</div>
<div class="show-mobile">
[rev_slider alias="slider-mobile"][/rev_slider]
</div>
Check out this snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
.show-mobile{
display: none;
}
#media only screen and (max-width: 500px) {
.show-desktop {
display: none;
}
.show-mobile{
display: block;
}
}
</style>
<script type="text/javascript">
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
</script>
</head>
<body>
<script type="text/javascript">
if(vw > 500){
document.writeln('<div class="show-desktop">');
document.writeln('\t[rev_slider alias="slider"][/rev_slider]');
} else {
document.writeln('<div class="show-mobile">');
document.writeln('\t[rev_slider alias="slider-mobile"][/rev_slider]');
}
</script>
</div>
</body>
</html>
CSS:-
Firstly we hided class .show-mobile using display: none;.
Next we created new CSS rule, exclusively for screens whose maximum width is 500px or less using #media only screen and (max-width: 500px).
Finally, inside the rule, we hided class .show-desktop and displayed class .show-mobile.
JavaScript:-
Inside head section, we save view-port height and width in constants vw and vh, respectively.
Inside body section, we add <div> with appropriate class to the document according to the view-port's width.
I have created a webpage using HTML, CSS, JS (Paper.js)
But I want my webpage to be displayed only when opened in desktop sites
if it is opened in any smartphone the a message must appear like open in desktop nothing else must be loaded
because in touch screen devices all functions does not work properly
link to my webpage is -
https://sachinverma53121.github.io/Keypress-Sounds/key-sounds.html
You could use JS to not display the div/tag if the page is less than a certain width
Something like this might do:
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message" style="display: none;">Please use this on a desktop.</p>
<script>
if (window.innerWidth < 500){
document.getElementById("demo").style.display = "none";
document.getElementById("message").style.display = "block";
}
</script>
You could also use CSS
<style>
#message {
display: none;
}
#media (max-width: 500px){
#demo {
display: none;
}
#message {
display: block;
}
}
</style>
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message">Please use this on a desktop.</p>
you can do this in bootstrap like this. The paragraph hides on mobile size if you want to hide it on tablet size too, change the "sm" to "md" to find out how to use it visit this link https://getbootstrap.com/docs/4.2/utilities/display/:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>title</title>
</head>
<body>
<div class="d-none d-sm-block">
<p>hide me on mobile</p>
</div>
<div class="d-block d-sm-none">
<p><strong>show me on mobile</strong></p>
</div>
</body>
</html>
add a
<script>
var userAgent;
(function() {
userAgent = navigator.userAgent.toLowerCase();
if (typeof orientation !== 'undefined' || userAgent.indexOf('mobile') >= 0); {
alert('open in desktop');
} else {
document.body.innerHTML = 'your HTML as a string here';
}
})();
</script>
Hi I need to print a document without buttons.Can anyone please guide me to accomplish this task.
I have a button to print in button click onclick() event I have used window.print() to print those data .But In a print preview It shows the page including those 4 buttons.i do not want those buttons I need only those data.
for more information I have adde the image below
add a wrapper to non-printable stuff i.e buttons in your case. check below code :
<head>
<style type="text/css">
#printable {
display: none;
}
#media print {
#non-printable {
display: none;
}
#printable {
display: block;
}
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
Hope it helps.
Use CSS #media print or a print stylesheet to hide the button when it is printed. That way it will be hidden on the printout whether the button is used to print or not.
<style type="text/css">
#media print {
#printbtn {
display : none;
}
}
</style>
<input id ="printbtn" type="button" value="Print this page" onclick="window.print();" >
Refer #media print
Additional reference
You can specify different css rules for printing. Either you can use the #media print {} scope like this:
#media print {
/* Add your custom css rules here */
input {
display: none;
}
}
Or you can specify an entirely different css file to use like this (if you want to change your black background and white text to something more printer friendly):
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
1 Give your print button an ID:
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>`
Adjust your script the way that it hides the button before calling
window.print():
<script type="text/javascript">
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Set the print button to 'visible' again
//[Delete this line if you want it to stay hidden after printing]
printButton.style.visibility = 'visible';
}
</script>
To simply print a document using javascript, use the following code,
print(){
let w=window.open("www.url.com/pdf");
w.print();
w.close();
}
I've created a widget in GWT and I would like to be able to give users a small snippet of HTML that they can embed in their website so my widget will be rendered there.
I don't believe an iframe would be appropriate as one requirement is that clicking any links on my widget should take the user to my website (not just change the content of the iframe).
Any help would be greatly appreciated.
P.S. I tried embedding the following, but no luck:
< script src="http://embeddedapptest.appspot.com/embeddedapp/embeddedapp.nocache.js" >< /script >
< div id="foo" / >
It is possible. The snippet will need to be like
<script src="yourmodule.nocache.js"></script>
<div id="foo"/>
Then in your entry point do this:
RootPanel root = RootPanel.get("foo");
// add your things here. root.add(...);
You will need to be careful not to step on the outer page's styling and vice versa but compiled CSS should go a long way to helping that.
This is the technique used to embed an APIs Explorer in Google APIs documentation.
I don't think it's possible to do it now. But in the future you can use Web Components to do that.
But there's the possibility to export a GWT/Java API using gwt-exporter. That makes it possible to automatically create a JavaScript API. gwtchismes uses this to export a JavaScript version of GWT widgets. You can find a tutorial about it in their wiki.
In NetBeans GWT project
mycss.css:
body, html,div.wrap-frame{
margin: 0;
padding: 0;
widht: 100%;
height: 100%;}body{
background: white;
}
.row1or3 {
width: 100%;
height: 10%;
background: blue;
text-align: center;
}
.row2{
width: 100%;
height: 80%;
background: yellow;
text-align: center;
display:flex;
}
.wrapper{
width:100%;
height: 100%;
}
.box{
float:left;
height: 100%;
}
.box:nth-child(1){
width:25%;
background-color:red;
}
.box:nth-child(2){
width:50%;
background-color:green;
}
.box:nth-child(3){
width:25%;
background-color:yellow;
}
welcomeGWT.html
<html>
<head>
<script id=ft type="text/javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
<meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div class="row1or3"> Row1
</div>
<div class="row2">
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box" id="mydiv">
</div>
<div class="box">
Right Side Menu
</div>
</div>
</div>
<div class="row1or3">
Row3
</div>
</body>
MainEntryPoint.java
public class MainEntryPoint implements EntryPoint {
/**
* Creates a new instance of MainEntryPoint
*/
public MainEntryPoint() {
}
/**
* The entry point method, called automatically by loading a module that
* declares an implementing class as an entry-point
*/
public void onModuleLoad() {
final Label label = new Label("Hello, GWT!!!");
final Button button = new Button("Click me!");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
label.setVisible(!label.isVisible());
}
});
RootPanel root = RootPanel.get("mydiv");
root.add(button);
root.add(label);
}
}
Now you can name any div element of any html page as id=mydiv and add the compiled GWT jscript.
I have tested.