Creating Dynamic Fullscreen and Minimize Div Functions

Creating Dynamic Fullscreen and Minimize Div Functions - javascript

The screen displays 3 dynamically created and loaded divs. The problem I'm having is getting the resize to work when I try to make the divs go full screen. (Click the front button and the 2nd on the back). When using the select option on top, the resize works perfectly, but the fullscreen does not have the same effect.
This is my plunkr: http://plnkr.co/edit/qYxIRjs6KyNm2bsNtt1P
This is my current resize function:
for(i = 0; i<numOfDivs.length; i++){
var flipTarget = document.getElementById(flipDiv[i]);
addResizeListener(flipTarget, function() {
for(j = 0; j<numOfDivs.length; j++){
var style = window.getComputedStyle(flipTarget);
divWidth = parseInt(style.getPropertyValue('width'), 10);
divHeight = parseInt(style.getPropertyValue('height'), 10);
width = divWidth - margin.left - margin.right;
height = divHeight - margin.top - margin.bottom;
document.getElementById(frontDivNames[j]).innerHTML = '<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onclick="flipper(\''+flipperDivNames[j]+'\')"></span>';
makeTestGraph();
makeSliderGraph();
};
});
}
Any help on hiding all the other divs and making them reappear later would also be greatly appreciated. This has taken a few days of work and I have gotten almost nowhere despite rewriting the code several times.
Thanks for the help.

Is there something wrong with the javascript fullscreen api???
<script>
var fullscreen;
SetFullscreen = function DetectFullscreen(el){
DesktopFullScreen = function ToggleFullScreen(el){
function cancelFullScreen(el) {
if (window.document.exitFullscreen) {
window.document.exitFullscreen();
} else if (window.document.webkitExitFullscreen) {
window.document.webkitExitFullscreen();
} else if (window.document.mozCancelFullScreen) {
window.document.mozCancelFullScreen();
} else if (window.document.msExitFullscreen) {
window.document.msExitFullscreen();
}
return undefined;
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = document.getElementById(el).requestFullScreen || document.getElementById(el).webkitRequestFullScreen || document.getElementById(el).mozRequestFullScreen || document.getElementById(el).msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(document.getElementById(el));
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return true;
}
if (fullscreen){
fullscreen = cancelFullScreen(el);
}
else{
fullscreen = requestFullScreen(el);
}
}
MobileFullScreen = function ToggleFullScreen(el){
function cancelFullScreen(el) {
document.getElementById("fullscreenstyle").innerHTML="";
return undefined;
}
function requestFullScreen(el) {
document.getElementById("fullscreenstyle").innerHTML="#"+el+" {position:fixed;top:0px;left:0px;width:100%;height:100%;}";
return true;
}
if (fullscreen){
fullscreen = cancelFullScreen(el);
}
else{
fullscreen = requestFullScreen(el);
}
}
if( navigator.userAgent.match(/mobile/i)){
MobileFullScreen(el);
}
else{
DesktopFullScreen(el);
}
}
</script>
<style>
div{background:white;}
</style>
<style id="fullscreenstyle">
</style>
<div id="fullscreen" onclick="SetFullscreen(this.id)">hello</div>
Following on from your comments are you looking for something like this?
<script>
function cancelFullScreen(el) {
document.getElementById("fullscreenstyle").innerHTML="";
selectedElement = document.getElementById(el);
selectedElement.setAttribute("onclick","requestFullScreen(this.id)");
document.body.innerHTML=bodysave;
return undefined;
}
function requestFullScreen(el) {
document.getElementById("fullscreenstyle").innerHTML="#"+el+" {background:pink;position:fixed;top:0px;left:0px;width:97%;height:97%;}";
selectedElement = document.getElementById(el);
bodysave = document.body.innerHTML;
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
document.body.appendChild(selectedElement);
selectedElement.setAttribute("onclick","cancelFullScreen(this.id)");
return true;
}
</script>
<style>
div{background:white;}
</style>
<style id="fullscreenstyle">
</style>
<div id="fullscreen" onclick="requestFullScreen(this.id)">hello</div>
<div id="fullscreen2" onclick="requestFullScreen(this.id)">hello</div>
<div id="fullscreen3" onclick="requestFullScreen(this.id)">hello</div>

Related

Reset variable onclick event

I have a Javascript like given below, what it does is, it calls
doSomethingWithSelectedText
function which checks that if any text is selected (using function getSelectedObj).
getSelectedObj returns an object.
The problem is that div #text gets updated everytime some text is selected. And div #search opens the new google tab searching the highlighted/ selected text.
But it stops updating after that on any other selection.
document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;
function getSelectedObj() {
var selObj = {};
selObj.text = '';
if (typeof window.getSelection != "undefined") {
selObj.rect = window.getSelection().getRangeAt(0).getBoundingClientRect() ;
selObj.text = window.getSelection().toString();
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
// this block not used in new versions of chrome, mozilla and IE11
selObj.text = document.selection.createRange().text;
}
return selObj;
}
function doSomethingWithSelectedText(e) {
var selectedObj = getSelectedObj();
if (selectedObj.text) {
document.querySelector('#popup').style.display = 'block';
document.querySelector('#popup').style.top = e.clientY - 40;
document.querySelector('#popup').style.left = e.clientX + 20;
document.querySelector('#text').innerHTML = selectedObj.text;
document.querySelector('#search').addEventListener('click', function (e) {
window.open('https://www.google.com/search?q=' + selectedObj.text);
});
}
else {
document.querySelector('#popup').style.display = 'none';
selectedObj.text = '';
}
}
May be it is because of the addEventlistener is defined inside if () of the mouseup event. And it does not get updated. I don't know how to handle this.
index.html
<div id="popup">
<div id ="text"></div>
<div id="search" class="fa fa-search"></div>
<div id="save" class="fa fa-file"></div>
</div>
styles.css
#popup{
display: none;
background-color: orange;
color: white;
position: absolute;
z-index: 1000;
width:100px;
height: 50px;
}
#search,#save {
display: inline-block;
padding: 15px;
font-size: 20px;
}

You should indeed put the event handler outside of your function, as you will be stacking up handlers that all will be executed on the next search click.
Here is an update of your code with the changes marked with ***:
document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;
function getSelectedObj() {
var selObj = {};
selObj.text = '';
if (typeof window.getSelection != "undefined") {
// ***Additional safety to avoid runtime errors
if (window.getSelection().rangeCount) {
selObj.rect = window.getSelection().getRangeAt(0).getBoundingClientRect() ;
selObj.text = window.getSelection().toString();
}
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
// this block not used in new versions of chrome, mozilla and IE11
selObj.text = document.selection.createRange().text;
}
return selObj;
}
// ***Variable for retaining the search string
var searchStr = '';
// ***Capture mouseup instead of click, so we can prevent the document level
// handler to get called.
document.querySelector('#search').addEventListener('mouseup', function (e) {
window.open('https://www.google.com/search?q=' + searchStr);
return false; // ***Cancel bubbling to document.
});
function doSomethingWithSelectedText(e) {
var selectedObj = getSelectedObj();
if (selectedObj.text) {
console.log('text:' + selectedObj.text);
document.querySelector('#popup').style.display = 'block';
document.querySelector('#popup').style.top = e.clientY - 40;
document.querySelector('#popup').style.left = e.clientX + 20;
// ***Use textContent instead of innerHTML
document.querySelector('#text').textContent = selectedObj.text;
// ***Store search string to be used when launching search
searchStr = selectedObj.text;
} else {
document.querySelector('#popup').style.display = 'none';
}
}

Why isn't it possible to change max-height with % in javascript?

I'm trying to build a responsive menu, with a hamburger icon. I want the menu list to slide in and out, no jquery - pure javascript only.
HTML :
<div id="animation">
</div>
<button id="toggle">Toggle</button>
CSS :
div {
width: 300px;
height: 300px;
background-color: blue;
}
Javascript :
var but = document.getElementById('toggle');
var div = document.getElementById('animation');
var animate = function(type, callback){
var inter = -1, start = 100, end = 0;
if(type==true){
inter = 1;
start = 0;
end = 100;
}
var si = setInterval(function(){
console.log('maxheight');
div.style.maxHeight = (start + inter) + '%';
if(start == end){
clearInterval(si);
}
}, 10);
}
var hidden = false;
but.onclick = function(){
animate(hidden, function(){
hidden = (hidden == false) ? true : false;
});
}
div.style.maxHeight = "50%";

The problem is that proportional height in an element needs a fixed height on the parent, and you didn't provided any parent with a fixed height because for the maxHeight property too the % Defines the maximum height in % of the parent element.
You have to put your div in a parent container with a fixed height, this is your working code:
var but = document.getElementById('toggle');
var div = document.getElementById('animation');
var animate = function(type, callback) {
var inter = -1,
start = 100,
end = 0;
if (type) {
inter = 1;
start = 0;
end = 100;
}
var si = setInterval(function() {
console.log('maxheight');
div.style.maxHeight = (start + inter) + '%';
if (start == end) {
clearInterval(si);
}
}, 10);
}
var hidden = false;
but.onclick = function() {
animate(hidden, function() {
hidden = !hidden ;
});
}
div.style.maxHeight = "50%";
#animation {
width: 300px;
height: 300px;
background-color: blue;
}
#parent {
width: 500px;
height: 500px;
}
<div id="parent">
<div id="animation">
</div>
<button id="toggle">Toggle</button>
</div>
Note:
As stated in comments there are some statements in your JavaScript code that need to be adjusted:
if(type==true) can be written as if(type).
hidden = (hidden == false) ? true : false; can be shortened to hidden = !hidden

There seems to be a few errors with your code. I have fixed the js and added comments to what I have changed
var but = document.getElementById('toggle');
var div = document.getElementById('animation');
var animate = function (type, callback) {
var start = 100,
end = 0;
if (type) {
start = 0;
end = 100;
}
var si = setInterval(function () {
if (type) { // check whether to open or close animation
start++;
} else {
start--
}
div.style.maxHeight = start + '%';
if (start == end) {
clearInterval(si);
}
}, 10);
callback.call(this); // do the callback function
}
var hidden = false;
but.onclick = function () {
animate(hidden, function () {
hidden = !hidden; // set hidden to opposite
});
}
/*make sure parent container has a height set or max height won't work*/
html, body {
height:100%;
margin:0;
padding:0;
}
div {
width: 300px;
height: 300px;
background-color: blue;
}
<div id="animation"></div>
<button id="toggle">Toggle</button>
Example Fiddle

Java Script Slide Show (add slide effect)

I have a problem
this are my first steps in javascript and I'm trying to make a Javascript slide show.
I try to add a "slide in" "slide out" effect
But I don't know how I can do this.
I google about 2-3 hours but still no solution.
Please help me and give me some feedback please
Here is my code
<head>
<title>Test Slider</title>
</head>
<body>
<div id="slider" style="width: 400px; height: 200px;color: orange; font-weight: bold; font-size: 30px;font-family: sans-serif" onclick="javascript:superlink()" style="cursor:pointer;"></div>
<script type="text/javascript">
//Init//
var SlideDauer = 2000;
var ImgInX = 0;
var ImgInXposition = 0;
var background = 'url(http://www.flashforum.de/forum/customavatars/avatar47196_1.gif)';
var SldInX = 0;
var LinkInX = 0;
function superlink() {
if (!SliderKannEsLosGehen()) return false;
if (LinkInX >= SliderBilder.length) {
LinkInX = 0;
}
var Ziel = window.location.href = SliderLink[LinkInX];
++LinkInX;
}
var SliderBilder = new Array();
SliderBilder.push("http://ds.serving-sys.com/BurstingRes//Site-80313/Type-0/721dbabb-2dd5-4d92-9754-7db9c5888f48.jpg");
SliderBilder.push("http://bytes.com/images/bytes_logo_a4k80.gif");
SliderBilder.push("http://cdn.qservz.com/file/df8e9dcf202cfddedf6f2d4d77fcf07b.gif");
SliderBilder.push("http://ds.serving-sys.com/BurstingRes//Site-80313/Type-0/721dbabb-2dd5-4d92-9754-7db9c5888f48.jpg");
//SliderBilder.push("http://www.flashforum.de/forum/customavatars/avatar47196_1.gif");
var SliderTitle = new Array();
SliderTitle.push("");
SliderTitle.push("Title 1");
SliderTitle.push("Title 3");
SliderTitle.push("Title 4");
//SliderTitle.push("Title 5");
var SliderLink = new Array();
SliderLink.push("http://www.google.de");
SliderLink.push("http://spiegel.de");
SliderLink.push("http://bing.com");
SliderLink.push("http://youtube.com");
//SliderLink.push ("http://www.flashforum.de/forum/customavatars/avatar47196_1.gif");
function SliderKannEsLosGehen() {
if (SliderBilder.length < 2) return false;
return true;
if (SliderTitle.length < 2) return false;
return true;
}
//Run//
function SliderRun() {
if (!SliderKannEsLosGehen()) return false;
if (ImgInX >= SliderBilder.length) {
ImgInX = ImgInXposition;
}
if (SldInX >= SliderBilder.length) {
SldInX = 0;
}
document.getElementById("slider").style.backgroundImage = 'url(' + SliderBilder[ImgInX] + ')';
++ImgInX;
document.getElementById("slider").innerHTML = SliderTitle[SldInX];
++SldInX;
window.setTimeout("SliderRun()", SlideDauer);
}
window.setTimeout("SliderRun()", SlideDauer);
</script>
</body>
</html>

For effects i would look into JQuery and use the animate function. There is loads of fun to be had with this as long as you have an understanding of css.

Text and cursor styles changed via JavaScript: browser compatibility problems

i have a navigation bar that uses JavaScript to track its state and to update text and cursor style attributes accordingly. This works as intended in Firefox 26.0, but not in Chrome 32.0.1700.76; in Chrome, it appears to do nothing. A short script that illustrates this is:
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var foo_on = true;
function turn_on(x) {
x.style = "color: #42A6FF; cursor: pointer;";
x.onmouseover = function () { x.style = "color: #444444; cursor: pointer;"; };
x.onmouseout = function () { x.style = "color: #42A6FF; cursor: pointer;"; };
}
function turn_off(x) {
x.style = "color: #BBBBBB; cursor: default;";
x.onmouseover = null;
x.onmouseout = null;
}
function toggle(caller) {
if((foo_on && caller == 'bar') || (!foo_on && caller == 'foo')){ return; }
if(foo_on){
turn_off(foo);
turn_on(bar);
}
else{
turn_on(foo);
turn_off(bar);
}
foo_on = !foo_on;
}
function init() {
foo_on = true;
turn_on(foo);
turn_off(bar);
}
window.onload = init();
My document layout is:
<html>
<head>
<title>Test</title>
</head>
<body>
<div style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;' unselectable='on'>
<a id="foo" onclick="toggle('foo')"> FOO </a>
<a id="bar" onclick="toggle('bar')"> BAR </a>
</div>
<script> {code above} </script>
</body>
</html>
This is live at http://jsfiddle.net/TF9X7/. Why doesn't this work in Chrome (or what mistake is Firefox forgiving me for)?

Or do it right, and use classes …
I'm very new to JavaScript; could you elaborate or provide a reference?
Instead of setting the style values directly via JS, you define them in your CSS, using a certain class name – and then you set or remove that class name for the elements:
CSS:
a { color: #BBBBBB; cursor: default; }
a.on { color: #42A6FF; cursor: pointer; }
a.on:hover { color: #444444; };
JS:
function turn_on(x) {
x.className = "on";
}
function turn_off(x) {
x.className = "";
}
http://jsfiddle.net/TF9X7/2/

I changed some parts of your script. Instead off window.onload, use body onload (<body onload="Init()">). The browser first needs to render the DOM in order to capture the objects.
In the function Init(), I changed to capture the element again, because Chrome is returning null, and I changed how you set the properties of style, the correct is object.style.property.
<script>
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var foo_on = true;
function turn_on(x) {
x.style.color = "#42A6FF";
x.style.cursor = "pointer";
x.onmouseover = function () {
x.style.color = "#444444";
x.style.cursor = "pointer";
};
x.onmouseout = function () {
x.style.color = "#42A6FF";
x.style.cursor = "pointer";
};
}
function turn_off(x) {
x.style.color = "#BBBBBB";
x.style.cursor = "default";
x.onmouseover = null;
x.onmouseout = null;
}
function toggle(caller) {
if((foo_on && caller == 'bar') || (!foo_on && caller == 'foo')){
return;
}
if(foo_on){
turn_off(foo);
turn_on(bar);
}
else{
turn_on(foo);
turn_off(bar);
}
foo_on = !foo_on;
}
function init() {
foo = document.getElementById('foo');
bar = document.getElementById('bar');
foo_on = true;
turn_on(foo);
turn_off(bar);
}
body.onload = init();
</script>
But I advise you to use the way of CBroe

Need Help In Javascript Text Typer Effect

I have a javascript text typer code:
CSS:
body
{
background-color:black;
}
#writer
{
font-family:Courier;
font-size:12px;
color:#24FF00;
background-color:black;
}
Javascript:
var text = "Help Please, i want help.";
var counter = 0;
var speed = 25;
function type()
{
lastText = document.getElementById("writer").innerHTML;
lastText+=text.charAt(counter);
counter++;
document.getElementById("writer").innerHTML = lastText;
}
setInterval(function(){type()},speed);
HTML:
<div id="writer"></div>
I want to know how can i use <br> tag (skipping a line or moving to another line). I tried many ways but failed, I want that if I Typed My name is Master M1nd. and then i want to go on the other line how would i go?

I've made a jQuery plugin, hope this will make things easier for you. Here is a live demo : http://jsfiddle.net/wared/V7Tv6/. As you can see, jQuery is loaded thanks to the first <script> tag. You can then do the same for the other <script> tags if you like, this is not necessary but considered as a good practice. Just put the code inside each tag into separate files, then set appropriate src attributes in the following order :
<script src=".../jquery.min.js"></script>
<script src=".../jquery.marquee.js"></script>
<script src=".../init.js"></script>
⚠ Only tested with Chrome ⚠
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery.fn.marquee = function ($) {
function findTextNodes(node) {
var result = [],
i = 0,
child;
while (child = node.childNodes[i++]) {
if (child.nodeType === 3) {
result.push(child);
} else {
result = result.concat(
findTextNodes(child)
);
}
}
return result;
}
function write(node, text, fn) {
var i = 0;
setTimeout(function () {
node.nodeValue += text[i++];
if (i < text.length) {
setTimeout(arguments.callee, 50);
} else {
fn();
}
}, 50);
}
return function (html) {
var fragment, textNodes, text;
fragment = $('<div>' + html + '</div>');
textNodes = findTextNodes(fragment[0]);
text = $.map(textNodes, function (node) {
var text = node.nodeValue;
node.nodeValue = '';
return text;
});
this.each(function () {
var clone = fragment.clone(),
textNodes = findTextNodes(clone[0]),
i = 0;
$(this).append(clone.contents());
(function next(node) {
if (node = textNodes[i]) {
write(node, text[i++], next);
}
})();
});
return this;
};
}(jQuery);
</script>
<script>
jQuery(function init($) {
var html = 'A <i>marquee</i> which handles <u><b>HTML</b></u>,<br/> only tested with Chrome. Replay';
$('p').marquee(html);
$('a').click(function (e) {
e.preventDefault();
$('p').empty();
$('a').off('click');
init($);
});
});
</script>
<p></p>
<p></p>

Instead of passing <br> char by char, you can put a \n and transform it to <br> when you modify the innerHTML.
For example (http://jsfiddle.net/qZ4u9/1/):
function escape(c) {
return (c === '\n') ? '<br>':c;
}
function writer(text, out) {
var current = 0;
return function () {
if (current < text.length) {
out.innerHTML += escape(text.charAt(current++));
}
return current < text.length;
};
}
var typeNext = writer('Hello\nWorld!', document.getElementById('writer'));
function type() {
if (typeNext()) setInterval(type, 500);
}
setInterval(type, 500);
Also probably you'll be interested in exploring requestAnimationFrame (http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/), for your typing animation :)

We Keep Coding

JavaScript is the programming language of the Web.

Creating Dynamic Fullscreen and Minimize Div Functions - javascript

Related

Reset variable onclick event

Why isn't it possible to change max-height with % in javascript?

Java Script Slide Show (add slide effect)

Text and cursor styles changed via JavaScript: browser compatibility problems

Need Help In Javascript Text Typer Effect

Categories

Resources