totally remove particular div in mobile view - javascript

this is my html
<div id="lan">
NlEn
</div>
this is my css try
#media all and (max-width: 980px) {
#lan{
display:none;
}
}
if i try this above css then div is not visible in mobile view, that is ok but when i see in inspect element that particular div is available there, i dont want to show this in inspect element also. i want to delete it totally.
this is my javascript try
var mq = window.matchMedia('all and (max-width: 700px)');
if(mq.matches) {
$(function(){
$('#lan').remove();
});
}
The above code show me an error like this
JQMIGRATE: Migrate is installed, version 1.4.1
(index):420Uncaught TypeError: $ is not a function
at (index):420
(anonymous) # (index):420
What should i do?

Use the following code.
$(document).ready(function(){
var width = screen.width,
height = screen.height;
if (screen.width <= 320 || screen.height <= 176) {
$('#lan').remove();
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="lan">
NlEn
</div>
</body>
</html>

If you cannot remove the div, I suggest getting its parent element.

Related

Javascript: Check screen width and remove HTML element

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.

how to change image when scrolling webpage [html, javascript]

Hi i need to modify java script that will by changing fixed image.
In for example:
when page is loaded then image will by on right site. Next after scrolling down page image should be changed to next one for each e.g. 100px. Images need to by loaded from image list or something similar.
I have found java script that make something similar to this. [Instead of creating images of numbers i need to load my own images]
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
height: 400%;
background: white;
width: 100%;
}
.show {
width: 100px;
height: 100px;
position: fixed;
top: 300px;
right: 20px;
background: lime;
}
</style>
</head>
<body>
<img class="show" alt="0" src="img0.jpg" />
Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
var lastI
$(window).scroll(function() {
var scrollTop = $(this).scrollTop()
console.log(scrollTop)
var i = (scrollTop / 10).toFixed(0)
if (i !== lastI)
$(".show").attr({
"src": "img" + i + ".jpg",
"alt": i
})
lastI = i
})
</script>
</body>
</html>
Update:09.11.2017
Ok, I manage this code to work. What should I do it was to setup right path to image files like in my case ("src": "test/" + i + ".jpg",) where my images are in "test" folder, and change names of images [1.jpg, 2.jpg and so on].
You can easyli change your image with Native scroll event, without using JQuery :
You can see how to use native scroll event here
<body>
<!-- This is an image with a 'show' id -->
<img id="show" alt="0" src="img0.jpg" />
<script type="text/javascript">
/* this capture the `scroll event`*/
window.addEventListener('scroll', function(e) {
/* This generate a image name in case with scroll position (ex img1.jpg) */
let bgImage = 'img' + (window.scrollY / 10 ).toFixed(0) + '.jpg';
/* This specify the path where are your images list */
let bgImagePath = '../images/' + bgImage;
/* This get your element (img) with id `show` and change this background image by the path include in `bgImagePath` variable */
document.getElementById('show').style.backgroundImage = bgImagePath;
});
</script>
</body>
Native background image explain here
Native getElementById explain here
This sample of code do not use JQuery :) Just native Javascript : you van remove this lines in your code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
Hope I help you.
I'am not sure, try this one:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.Classname').css("background-image","../images/image.png");
} else {
$('.Classname').css("background-image","none");
}
});

My responsive menu gets gliched

I am working on my responsive menu that will be on desktop view a normal horizontal menu, but when the screen is smaller than 992px a hamburger style button will appear which will toggle a push-in side menu.
The problem i am facing is that the menu glitches when resizing the window aka switching between desktop and mobile view.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
my css:
#media screen and (min-width: 992px) {
}
and my js:
$(document).ready(function(){
$('#mobile-icon').click(function(){
$(this).toggleClass('closed');
});
$('.expander-icon').click(function(){
$(this).parent().toggleClass('active-menu');
});
});
$(window).on('load resize', function () {
var screenWidth = $( window ).width();
if(screenWidth < 992){
$('.u').addClass('isMobile');
$('#icon').click(function(){
$(this).toggleClass("open closed");
if($( "#con" ).hasClass( "open" )){
$('.gation').css('margin-left',"0");
}
else{
$('.asdn').css('margin-left',"-70%");
}
});
}
});
Simplify your JS, move everything you can to CSS. Instead of modifying margin left in JS do it in CSS, and whenever you toggle class open on mr-mobile-icon, toggle it also on mr-navigation. Your $(window).on('load resize', ... ); is unnecessary. Just remove it, let CSS do everything for you.
CSS:
#media screen and (max-width: 991px) {
.mr-navigation {
// style
margin-left: -70%;
}
.mr-navigation.opened {
margin-left: 0;
}
}
JS:
$('#mr-mobile-icon').click(function(){
$(this).toggleClass('open');
$('.mr-navigation').toggleClass('open');
});
I don't know if I fully understand what you're trying to do here but the first issue I see is that you're adding a click event to mr-mobile-icon constantly while while the window is resized. These click events don't erase existing click events, they stack. After the window has resized, you might have hundreds of click events on mr-mobile-icon, all telling the browser to change css attributes.
You'll want to remove the click event assignment from the window resize and load event and just use the one you've already got in the document.ready. If you scope the screenWidth variable to be globally-accessible, you can use it inside your click function.
Here's a basic example of what I'm suggesting, with your other code removed:
var screenWidth = $( window ).width();
$(document).ready(function(){
$('#mr-mobile-icon').click(function(){
if(screenWidth < 992) {
// do whatever needs to happen for mobile
} else {
// do whatever needs to happen for desktop
}
});
});
$(window).on('resize', function () {
screenWidth = $( window ).width();
});

print a document using javascript

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();
}

How to Change a div width when size of browser window change with javascript

How to Change a div width when size of browser window change with javascript (no jQuery)?
I want to perform this job dynamically when user resize his browser.
Please help, Immediately ...
any suggestion for this job with css?
Use percentage. for example width="50%" This will change the width when browser size change.
You can either set this with CSS or Javscript
CSS would be easily done using %'s ie
div {
width: 95%;
}
JS would be easily done using
var element = document.getElementById("x");
window.addEventListener('resize', function(event) {
element.style.width = window.style.width;
});
This code should work in all browsers. But you really should use CSS instead.
<!DOCTYPE html >
<html>
<head>
<meta charset="utf8" />
<title>untitled</title>
</head>
<body>
<div id="myDiv" style=" height: 200px; margin:10px auto; background: green;"></div>
<script type="text/javascript">
var myElement = document.getElementById('myDiv');
function detectWidth(){
var myWidth = 0;
if(typeof (window.innerWidth)== 'number'){
myWidth = window.innerWidth;
}
else {
myWidth = document.documentElement.clientWidth; //IE7
}
myElement.style.width=myWidth-300+'px';
}
window.onload=function(){
detectWidth();
};
window.onresize = function (){
detectWidth();
};
</script>
</body>
</html>

Categories

Resources