Remove parallax.js image when screen get's smaller - html

I'm using parallax.js to add parallax effect on my website. I would like to remove the data-image-src property when the screen size is smaller that 767pixels.
I know I should use #media screen and (max-width: 767px) {...} on my css file for that but I just can't figure out how to set the image property to none.
Here is an example:
<html>
<head>
<title>Panagiotis Portfolio</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.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/circle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="js/parallax.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body ng-app="">
<div ng-include src="'partials/header.html'"></div>
<div class="parallax-window" data-parallax="scroll" data-image-src="sky.jpg">
<div class="parallax-content">
<h3 id="summary">Summary</h3>
<hr>
<div ng-include="'partials/summary.html'"></div>
</div>
</div>
<!-- Some other parallax elements here -->
</body>
</html>
Inside my index.js I added as linusg suggested the following jQuery code but it doesn't seem to work.
$(document).ready(function() {
$(window).resize(function () {
// Check window size
if($(window).width() < 767) {
// Unset data-image-src property
$(".parallax-window").attr("data-image-src", "");
} else {
// Set data-image-src property
//$(".parallax-window").attr("data-image-src", "sea.jpg");
}
});
$(document).on('click', 'a:not([target="_blank"])', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 700);
});
});
Although the data-image-src value changes the image seems still to be there.
Any ideas?

You can use jQuery's $(window).width() for this:
$(window).resize(function () {
// Check window size
if($(window).width() < 767) {
// Unset data-image-src property
$(".parallax-window").attr("data-image-src", "");
} else {
// Set data-image-src property
$(".parallax-window").attr("data-image-src", "sea.jpg");
}
});
Make sure to wrap your code into a $(document).ready(...); like below, see this documentation.
Full code:
<html>
<head>
<!-- Other metadata and resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="parallax-window" data-parallax="scroll" data-image-src="sea.jpg">
<div class="parallax-content">
<h3 id="goals">Ambitions and Goals</h3>
<hr>
<div ng-include="'partials/goals.html'"></div>
</div>
</div>
<script>
$(document).ready(function() {
$(window).resize(function () {
// Check window size
if($(window).width() < 767) {
// Unset data-image-src property
$(".parallax-window").attr("data-image-src", "");
} else {
// Set data-image-src property
$(".parallax-window").attr("data-image-src", "sea.jpg");
}
});
});
</script>
</body>
</html>
Hope this helps!

Related

How to change the href for a hyperlink in head using jQuery

When user clicks navigation tab (for ex. "News" (code is in layout/navigation.html)), href in head must automatically change to href="../style.css"
snippet of head.html
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script>
$(document).ready(function(){
$(".nav li a").click(function(){
$("head link").each(function() {
if ($(this).attr("type")=="text/css"){
var link=$(this).attr("href");
alert(link);//OK
$(this).attr("href","../"+link);//not working
}
});
});
});
</script>
</head>

HTML To Fit an image only in specific resolution

I want to display an image (It can be of any size) only in a table of 1280 x 800 Resolution it will not display on other screens.
Now I'm using an <img> element inside the body, and if the image is small, it doesn't fill the screen and if the image is big, it display it out off the screen.
So the html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/senaletica.js"></script>
</head>
<body>
<img id="mapa" alt="mapa" src="">
</body>
</html>
And the javascript:
$('document').ready(function(){
var session = new QiSession();
session.service("ALMemory").done(function (ALMemory) {
ALMemory.subscriber("PepperQiMessaging/totablet").done(function(subscriber) {
subscriber.signal.connect(toTabletHandler);
});
});
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'data:image/png;base64,' + value);
imgMap.width($('window').width());
imgMap.height($('window').height());
}
});
I don't use any CSS at the moment.
window is an actual javascript entity and should not be quoted, which then makes it a string. Removing the quotes from 'window' will solve your problem.
See Below Snippet :
$(document).ready(function(){
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSd8cAJmOsrWimMAMpTAFOPURbw4q7uDKKxau1nimZ4V-usMb0w');
imgMap.width($(window).width());
imgMap.height($(window).height());
}
toTabletHandler(5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img id="mapa" alt="mapa" src="">
</body>

Create HTML canvas outside of current window

Right now I have a canvas pop-up, but I want it to be separate from the window from which it is originated (it's stuck within the boundaries of the first window, I can only drag it within the first window).
Is there any way to do this?
You can open a new browser instance with: window.open(aURL,'name','width=400,height=400')
1. Create an html file for your popup
Put this code into popupTest.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
window{width:300px; height:150px; }
body{ background-color: ivory;}
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font='14px verdana';
ctx.fillText('I am a popup canvas.',20,50);
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
2. Open the popup (popupTest.html) in a new browser instance
Put this code into runPopup.html and open it:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var popupURL='popupTest.html';
function myPopup(url){
window.open(url,'myPopup','width=400,height=400,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=yes');
return false;
}
$('#pop').on('click',function(){
myPopup(popupURL);
return(false);
});
}); // end $(function(){});
</script>
</head>
<body>
<button id=pop>Open Popup</button>
</body>
</html>
Note about opening your popup
This method requires the user to trigger the popup (eg button-click or anchor-click). If you want to programmatically trigger the popup you must be sure the user has any popup blocker turned off or else your popup will be blocked.

How to remove the scroll bar from iframe?

I used iframe for delivering an image icon for the pdf links in an html page.
I have tried using overflow:hidden, scrolling: "no" etc for removing the scroll bar from iframe. But none of them is working in chrome. When tried in firefox,the scroll bar is removed,but image is not available. Please help me on this.
Here is the complete code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" href="cssjquery/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
<title>Unit 3, ADS</title>
<style type="text/css">
/* one */
.imagewrap {
display: inline-block;
position: relative;
}
.icon-remove-sign {
position: absolute;
top: 0;
right: 0;
}
iframe{
overflow:hidden;
}
</style>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="jsjquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jsjquery/jquery-ui-1.8.24.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('i.icon-remove-sign').on('click',function(e){
e.preventDefault();
pdfID = $(this).closest('.imagewrap')[0].id;
$('#dialog').dialog('open');
alert('Deleting '+pdfID+'');
$(this).closest('.imagewrap')
.fadeTo(300,0,function(){
$(this)
.animate({width:0},200,function(){
$(this)
.remove();
});
});
});
});
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</head>
<body>
<h1>PDF Files</h1>
<br><br>
<div class="imagewrap" id="pdf1">
<a href="something.pdf">
<img width="100" height="100" border="0">
<iframe src="something.pdf" width="100%" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);'></iframe></img>
</a> <i class=" icon-remove-sign" ></i>
</div>
You can set attribute scrolling= 'no' in your iframe.
<iframe src="..." style="overflow:hidden" scrolling="no" />
Here is a fiddle
UPDATE
Here is a fiddle with a valid pdf link. It looks ok on my browser (ff, chrome)
Please try this code
<iframe src="your site url" width="100%" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);'></iframe>
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Add demo link
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
Use the above to remove scrollbars from iframes on chrome

CKEditor loading in Colorbox not working [ Google Chrome ]

I am using Colorbox in my project. I have integrated CKEditor in colorbox. Its working fine in all browsers, but a small issue in Google Chrome - Editor will open properly on first click, After closing the pop up and try the editor on second time without loading the page , I can't type text in the editor, Editor will enable on clicking on the source. I am not using the source toolbar in basic editor.
I spent more than 5 days for for finding a solution for this issue and try help from others - No result yet. Expecting better feedback...
Thanks for help in advance.
I have set up a test code for this...
index1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<script src="../ckeditor/_samples/sample.js" type="text/javascript"></script>
<link rel="stylesheet" href="colorbox.css" />
<link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a>
</body>
</html>
index2.html
<textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea>
<script type="text/javascript">
$(document).ready( function() { // I use jquery
var instance = CKEDITOR.instances['ckeditor_replace'];
if(instance)
{
CKEDITOR.remove(instance);
}
//CKEDITOR.config.startupFocus = true;
//CKEDITOR.config.startupShowBorders = false;
//CKEDITOR.config.startupOutlineBlocks = true;
//CKEDITOR.config.startupMode = 'source';
$( '.ckeditor_replace' ).val('12345');
$( '.ckeditor_replace' ).ckeditor(function() { } );
});
</script>
Regards
Nishad Aliyar
I got the solution for the same , just include the jquery and jquery adapter in index2.html. Please see below for example...
index1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<script src="../ckeditor/_samples/sample.js" type="text/javascript"></script>
<link rel="stylesheet" href="colorbox.css" />
<link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a>
</body>
</html>
index2.html
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea>
<script type="text/javascript">
$(document).ready( function() { // I use jquery
var instance = CKEDITOR.instances['ckeditor_replace'];
if(instance)
{
CKEDITOR.remove(instance);
}
//CKEDITOR.config.startupFocus = true;
//CKEDITOR.config.startupShowBorders = false;
//CKEDITOR.config.startupOutlineBlocks = true;
//CKEDITOR.config.startupMode = 'source';
$( '.ckeditor_replace' ).val('12345');
$( '.ckeditor_replace' ).ckeditor(function() { } );
});
</script>
Regards
Nishad Aliyar