I don't have much experience of jQuery.
I need to set the rows attribute of a <frameset> dynamically when the browser window is altered.
Here is my frameset: <FRAMESET BORDER='0' ROWS="112,*" id='reSizeWindow'>
And the jQuery which I used was:
$('#reSizeWindow').css('rows', $(window).height()+50+'px');
This didn't work so I used:
<script>
window.onresize = function() {
var widthViewport = window.innerWidth || document.body.clientWidth;
var el = document.getElementById('reSizeWindow');
if( widthViewport < 1000 ) {
el.setAttribute();
el.rows = '108'
} else {
el.rows = '100%';
}
};
</script>
Here I get the error as:
el is NULL
Please help me to get a working javascript / jQuery.
Try this
$(document).ready(function () {
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.height() <= 1000)
{
parent.document.getElementsByTagName( 'frameset' )[ 0 ].rows = '108,*'
}
else { parent.document.getElementsByTagName( 'frameset' )[ 0 ].rows = '150,*' }
});
});
The following code worked for me with help of Sridhar R.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(window).on('resize', function(){
var win = $(this);
if (win.width() <= 1000) { // width() and not height()
parent.document.getElementsByTagName( 'frameset' )[ 0 ].rows = '150,*';
} else {
parent.document.getElementsByTagName( 'frameset' )[ 0 ].rows = '108,*';
}
});
});
</script>
Related
(function ($) {
var window = $(window),
one = $("#one"),
two = $("#two"),
three = $("#three"),
four = $("#four"),
oneT = one.offset().top,
twoT = two.offset().top,
threeT = three.offset().top,
fourT = four.offset().top;
function Scroll(div) {
var tp = $(div).offset().top;
$("html, body").animate({ scrollTop: tp }, 500);
}
var tmp = 0;
var mousewheelevt = /Firefox/i.test(navigator.userAgent)
? "DOMMouseScroll"
: "mousewheel";
$("section").bind(mousewheelevt, function (e) {
var evt = window.event || e;
evt = evt.originalEvent ? evt.originalEvent : evt;
var delta = evt.detail ? evt.detail * -40 : evt.wheelDelta;
console.log(delta);
if (delta < 0) {
tmp++;
if (tmp > 0) {
var divT = $(this).next();
Scroll(divT);
tmp = 0;
}
} else if (delta > 0) {
tmp--;
console.log("going up");
if (tmp < -1) {
var divT = $(this).prev();
Scroll(divT);
tmp = 0;
}
}
});
})(jQuery);
This is the code im using is there any problem , i am getting error called
index.html:100 Uncaught TypeError: Cannot read properties of undefined (reading 'top')
Can you please help me with this.
You likely do not have 4 sections in your HTML or you have divs with a class and you need a dot: $(".section")
Then you need to use the wheel event instead of your current deprecated code
jQuery messes things up and you need to then use the originalEvent
You do not actually use any of the vars you declared in the beginning
I also got rid of half the tests by testing the existence of next/prev
(function($) {
function Scroll($div) {
var tp = $div.offset().top;
$("html, body").animate({
scrollTop: tp
}, 500);
}
const $sections = $("section");
$sections.on("wheel", function(e) {
const delta = e.originalEvent.wheelDelta; // all newer browsers
const down = delta < 0;
let $divT = down ? $(this).next("section") : $(this).prev("section");
// we may get a next or previous that is undefined - not obvious
if (!$divT.attr("id") || $divT.length === 0) {
if (down) $divT = $sections.first();
else $divT = $sections.last();
}
Scroll($divT);
});
})(jQuery);
section {
height: 500px;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section id="one">One</section>
<section id="two">Two</section>
<section id="three">Three</section>
<section id="four">Four</section>
I have the following test page:
(didn't post code 'cause would be too big)
As noticed, when you finish scrolling the little div in the bottom, the main div also scrolls. Is there anything, propriety to disable this behaviour?
Thanks.
See the plugin mentioned on this question:
Prevent scrolling of parent element?
Or take a look at the JS here (not my code). This code adds classes to the children and traps the scroll event which can be used to prevent the parent from scrolling.
http://codepen.io/LelandKwong/pen/edAmn
var trapScroll;
(function($){
trapScroll = function(opt){
var trapElement;
var scrollableDist;
var trapClassName = 'trapScroll-enabled';
var trapSelector = '.trapScroll';
var trapWheel = function(e){
if (!$('body').hasClass(trapClassName)) {
return;
} else {
var curScrollPos = trapElement.scrollTop();
var wheelEvent = e.originalEvent;
var dY = wheelEvent.deltaY;
// only trap events once we've scrolled to the end
// or beginning
if ((dY>0 && curScrollPos >= scrollableDist) ||
(dY<0 && curScrollPos <= 0)) {
opt.onScrollEnd();
return false;
}
}
}
$(document)
.on('wheel', trapWheel)
.on('mouseleave', trapSelector, function(){
$('body').removeClass(trapClassName);
})
.on('mouseenter', trapSelector, function(){
trapElement = $(this);
var containerHeight = trapElement.outerHeight();
var contentHeight = trapElement[0].scrollHeight; // height of scrollable content
scrollableDist = contentHeight - containerHeight;
if (contentHeight>containerHeight)
$('body').addClass(trapClassName);
});
}
})($);
var preventedCount = 0;
var showEventPreventedMsg = function(){
$('#mousewheel-prevented').stop().animate({opacity: 1}, 'fast');
}
var hideEventPreventedMsg = function(){
$('#mousewheel-prevented').stop().animate({opacity: 0}, 'fast');
}
var addPreventedCount = function(){
$('#prevented-count').html('prevented <small>x</small>' + preventedCount++);
}
trapScroll({ onScrollEnd: addPreventedCount });
$('.trapScroll')
.on('mouseenter', showEventPreventedMsg)
.on('mouseleave', hideEventPreventedMsg);
$('[id*="parent"]').scrollTop(100);
I'm doing comment text area like a Facebook. I'm tried do this by calculating cols and length of value. But there are not same size to symbols ("l" or "a"). How can i do text area like Facebook in javascript and not using any plugins?
My code is like this:
<textarea cols="50" rows="1" onkeydown="comChangeHeight(this);"></textarea>
<script type="text/javascript">
function comChangeHeight(obj) {
var id = obj.id;
var length - obj.value.length;
obj.rows = Math.ceil(length / obj.cols);
}
</script>
I wrote this code:
window.onload = function() {
var t = document.getElementsByTagName('textarea')[0];
var offset= !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight + parseInt(window.getComputedStyle(t, null).getPropertyValue('border-top-width'))) ;
var resize = function(t) {
t.style.height = 'auto';
t.style.height = (t.scrollHeight + offset ) + 'px';
}
t.addEventListener && t.addEventListener('input', function(event) {
resize(t);
});
t['attachEvent'] && t.attachEvent('onkeyup', function() {
resize(t);
});
}
I think it helps others too.
I am looking for a way that I can hide specific HTML content based on a variable in the URL.
For example, I am passing a variable: index.html?app=new
I have various images and other content that has a prod attribute and would like to show only those that have the "new" prod value.
<img prod="new" class="image" src="../images/screen.png" height="300" width="600"/>
I have used the following to harvest the url variable:
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
My problem is where to go from here
I think this CSS rule will do the magic for you:
[prod]:not([prod=new]) { display:none; }
It will hide all elements having 'prod' attribute with the value other than 'new'.
This is untested code.
HTML
<img data-prod="new" class="image" src="../images/screen.png" height="300" width="600" />
JavaScript
<script>
(function(){
'use strict';
var getUrlVars = function() {
var vars = {};
window.location.href.replace(
/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
}
);
return vars;
};
if(typeof getUrlVars.app === 'string' && getUrlVars.app === 'new') {
var c = document.querySelectorAll('[data-prod="new"]'), i;
for(i = 0; i < c.length; i+=1) {
c[i].style.display = 'none';
}
}
})();
</script>
In the general case (i.e. app=new, app=whatever), you can substitute new in the querySelectorAll parameter as the variable itself:
if(typeof getUrlVars.app === 'string') {
var c = document.querySelectorAll('[data-prod="' + getUrlVars.app + '"]'), i;
for(i = 0; i < c.length; i+=1) {
c[i].style.display = 'none';
}
}
I need help setting up Jadriens FileReader.js. I have set up everything as I think this polyfill works. But the callback that fires when everything is initiated doesn't fire in IE9. This is my markup:
<body>
<div class="main">
<canvas id="mainCanvas" width="600" height="600"></canvas><br />
<div id="fileReaderSWFObject"></div>
<input type="file" id="imageLoader" name="imageLoader" /><br />
<input id="text" type="text" placeholder="some text...">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<!--[if lt IE 10]>
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="js/vendor/jquery-ui-1.8.23.custom.min.js"></script>
<script src="js/vendor/jquery.FileReader.min.js"></script>
<![endif]-->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
And this is main.js:
$(function () {
// Variables
var canvas = document.getElementById('mainCanvas');
var context = canvas.getContext('2d');
var canvasCenter = canvas.width / 2;
var img = '';
var newImageHeight = 0;
var logoX = 0;
var padding = 50;
// Functions
var flushCanvas = function () {
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.width + padding);
if (img !== '') {
context.drawImage(img, padding, padding, canvas.width - (padding * 2), newImageHeight - (padding * 2));
}
setText();
};
var setText = function () {
context.textAlign = 'center';
context.fillStyle = '#fff';
context.font = '22px sans-serif';
context.textBaseline = 'bottom';
context.fillText($('#text').val(), canvasCenter, canvas.height - 40);
};
// Init
if ($.browser.msie && $.browser.version <= 9) {
swfobject.embedSWF('filereader.swf', 'fileReaderSWFObject', '100%', '100%', '10', 'expressinstall.swf');
$('#imageLoader').fileReader({
id: 'fileReaderSWFObject',
filereader: 'filereader.swf',
expressInstall: 'expressInstall.swf',
debugMode: true,
callback: function () { console.log('filereader ready'); }
});
}
$('#imageLoader').change(function (e) {
if ($.browser.msie && $.browser.version <= 9) {
console.log(e.target.files[0].name);
} else {
var reader = new FileReader();
reader.onload = function (event) {
img = new Image();
img.onload = function () {
newImageHeight = (img.height / img.width) * (canvas.width);
canvas.height = newImageHeight + padding;
flushCanvas();
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
});
$('#text').keyup(function (e) {
flushCanvas();
});
});
A lot of code but i thought a context might help. The important lines are just below the Init comment. The callback-function in the .fileReader init options never fires. It does fire in other modern browsers though (if you remove the if statement).
There are a combination of mistakes here.
Jahdriens filereader takes care of the embedding of flash. Just include the swfObject library.
Browser sniffing = bad idea. Modernizr = good idea.
Make sure you have flash for IE installed :(
My final code looks like this and it works perfect. HTML:
<canvas id="mainCanvas" width="600" height="600"></canvas><br />
<a id="imageLoaderButton" class="button upload">load image</a>
<input type="file" id="imageLoader" class="hidden" name="imageLoader" />
<input id="text" type="text" placeholder="some text...">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>
<script src="js/main.js"></script>
+ link in a custom build of modernizr in the head. (click "non core detects" -> "file-api" when creating you custom build)
And my JS:
$(function () {
Modernizr.load({
test: Modernizr.filereader,
nope: ['js/vendor/swfobject.js', 'js/vendor/jquery-ui-1.8.23.custom.min.js', 'js/vendor/jquery.FileReader.min.js'],
complete: function () {
if (!Modernizr.filereader) {
$('#imageLoaderButton').fileReader({
id: 'fileReaderSWFObject',
filereader: 'filereader.swf',
expressInstall: 'expressInstall.swf',
debugMode: true,
callback: function () {
$('#imageLoaderButton').show().on('change', read);
}
});
} else {
$('#imageLoaderButton').show().on('click', function () {
$('#imageLoader').trigger('click').on('change', read);
});
}
}
});
// Variables
var canvas = document.getElementById('mainCanvas');
var context = canvas.getContext('2d');
var canvasCenter = canvas.width / 2;
var img = '';
var padding = 50;
// Functions
var flushCanvas = function () {
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.width + padding);
if (img !== '') {
context.drawImage(img, padding, padding, canvas.width - (padding * 2), newImageHeight - (padding * 2));
}
setText();
};
var setText = function () {
context.textAlign = 'center';
context.fillStyle = '#fff';
context.font = '22px sans-serif';
context.textBaseline = 'bottom';
context.fillText($('#text').val(), canvasCenter, canvas.height - 40);
};
var read = function (e) {
if (typeof FileReader !== 'undefined') {
var reader = new FileReader();
reader.onload = function (event) {
img = new Image();
img.onload = function () {
newImageHeight = (img.height / img.width) * (canvas.width);
canvas.height = newImageHeight + padding;
flushCanvas();
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
};
$('#text').keyup(function (e) {
flushCanvas();
});
});
The problem with IE9 is you need flash player to be installed first also there are many features not supported by IE9