please I need some help in previewing a form in popup. I have a form, quite big, so I added the option of preview to show as popup. The lightbox form popup works well, but the problem I now have is function passform() passing the inputs(textfield, select, checkbox, radio) into the popup page for preview on Click().
Below are my javascript and html codes. I left the css and some html out, because I think they're not necessary. I will appreciate your help. Thank you
The Javascript
function gradient(id, level)
{
var box = document.getElementById(id);
box.style.opacity = level;
box.style.MozOpacity = level;
box.style.KhtmlOpacity = level;
box.style.filter = "alpha(opacity=" + level * 100 + ")";
box.style.display="block";
return;
}
function fadein(id)
{
var level = 0;
while(level <= 1)
{
setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
level += 0.01;
}
}
// Open the lightbox
function openbox(formtitle, fadin)
{
var box = document.getElementById('box');
document.getElementById('shadowing').style.display='block';
var btitle = document.getElementById('boxtitle');
btitle.innerHTML = formtitle;
if(fadin)
{
gradient("box", 0);
fadein("box");
}
else
{
box.style.display='block';
}
}
// Close the lightbox
function closebox()
{
document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none';
}
//pass form fields into variables
var divexugsotherugsexams1 = document.getElementById('divexugsotherugsexams1');
var exugsotherugsexams1 = document.form4.exugsotherugsexams1.value;
function passform()
{
divexugsotherugsexams1.innerHTML = document.form4.exugsotherugsexams1.value;
}
The HTML(with just one text field try):
<p><input name="submit4" type="submit" class="button2" id="submit4" value="Preview Note" onClick="openbox('Preview Note', 1)"/>
</p>
<div id="shadowing"></div>
<div id="box">
<span id="boxtitle"></span>
<div id="divexugsotherugsexams1"></div>
<script>document.write('<PARAM name="SRC" VALUE="'+exugsotherugsexams1+'">')</script>
Close
</div>
Related
entering correct student name associated with image within prompt but it is not running the "checkAnswer" function
this is the function
function checkAnswer() {
if (document.getElementById('response').value == personArray[currentId].firstname) {
//NOTE TO STUDENT: apply the class to reduce the opacity of the image,
//takeout the mouse events because they shouldn't be there anymore
document.getElementById(currentId).className = "opClass";
document.getElementById(currentId).removeAttribute("onclick");
document.getElementById(currentId).removeAttribute("onmouseover");
//superimpose name on image
var divVar = document.createElement('div');
divVar.setAttribute('id', currentId + 'name');
document.getElementById('pic-grid').appendChild(divVar);
var textNode = document.createTextNode(personArray[currentId].firstname);
divVar.appendChild(textNode);
document.getElementById(currentId + 'name').style.position = "absolute";
document.getElementById(currentId + 'name').style.top = y;
document.getElementById(currentId + 'name').style.left = x;
//clean up loose ends: hide the prompt, turn the frame white so it doesn't change to aqua on the rollover, erase the response and message
document.getElementById('prompt').style.display = 'none';
document.getElementById(currentId).parentNode.style.backgroundColor = 'white';
document.getElementById('response').value = "";
document.getElementById('message').innerHTML = "";
} else {
if (document.getElementById('message').innerHTML == "Wrong!") {
document.getElementById('message').innerHTML = "Incorrect answer!"
} else {
document.getElementById('message').innerHTML = "Wrong!"
}
}
return false;
}
Basically if the user enters the correct name in the prompt that is associated with the image they selected, the image should fade (opacity) and display the name of the student in the image (style position, top, & left) or if they enter the wrong name they are told within the prompt that they are wrong or incorrect.
As soon as I enter the correct student name, the prompt disappears and nothing happens or if I do the wrong name, it disappears as well.
here is the populateImages function that i forgot to place in here, sorry.
function populateImages() {
for (var i = 0; i < personArray.length; i++) {
var imageContainer = document.createElement("div");
var image = document.createElement("img");
imageContainer.classList.add('frame');
image.src = personArray[i].url;
image.setAttribute('onclick','promptForName(this)');
image.setAttribute('onmouseover','styleIt(this)');
image.setAttribute('onmouseout','unStyleIt(this)');
imageContainer.appendChild(image);
document.getElementById('pic-grid').appendChild(imageContainer);
}
}
Here's my HTML:
<body onload="populateImages()">
<header>
<h2>Class Flashcards</h2>
<h3>Click on a student to guess their name</h3>
<h4>Concepts: Rollovers, Opacity, Showing and Hiding Elements, Arrays of Objects, Adding and Removing Elements/Attributes Dynamically to the DOM,
Accessing Elements using parentnode</h4>
</header>
<div id="pic-grid">
</div>
<div id="prompt">
What is this student's name?<br>
<form onsubmit="return checkAnswer()">
<input type="text" id="response" name="quizInput">
</form>
<div id="message"></div>
</div>
</body>
the form is being submitted through this function and shows up when image is selected:
function promptForName(element) {
document.getElementById('response').value = "";
document.getElementById('message').innerHTML = "";
document.getElementById('prompt').style.display = 'block';
currentId = element.id;
x = element.offsetLeft;
y = element.offsetTop;
x = x + 20;
y = y + 20;
document.getElementById('prompt').style.position = "absolute";
document.getElementById('prompt').style.top = y;
document.getElementById('prompt').style.left = x;
document.getElementById('response').focus();
}
return false cancels submit action. you must insert a return true if everything is ok
try this function
function checkAnswer() {
if (document.getElementById('response').value == personArray[currentId].firstname) {
//NOTE TO STUDENT: apply the class to reduce the opacity of the image,
//takeout the mouse events because they shouldn't be there anymore
document.getElementById(currentId).className = "opClass";
document.getElementById(currentId).removeAttribute("onclick");
document.getElementById(currentId).removeAttribute("onmouseover");
//superimpose name on image
var divVar = document.createElement('div');
divVar.setAttribute('id', currentId + 'name');
document.getElementById('pic-grid').appendChild(divVar);
var textNode = document.createTextNode(personArray[currentId].firstname);
divVar.appendChild(textNode);
document.getElementById(currentId + 'name').style.position = "absolute";
document.getElementById(currentId + 'name').style.top = y;
document.getElementById(currentId + 'name').style.left = x;
//clean up loose ends: hide the prompt, turn the frame white so it doesn't change to aqua on the rollover, erase the response and message
document.getElementById('prompt').style.display = 'none';
document.getElementById(currentId).parentNode.style.backgroundColor = 'white';
document.getElementById('response').value = "";
document.getElementById('message').innerHTML = "";
return true; // return true if everything is ok
} else {
if (document.getElementById('message').innerHTML == "Wrong!") {
document.getElementById('message').innerHTML = "Incorrect answer!"
} else {
document.getElementById('message').innerHTML = "Wrong!"
}
return false; // return false if error
}
}
I have a Javascript function for Marquee animation in my ASP.NET Masterpage that runs fine when the page is first loaded, but then stops when a page button is pressed. Any idea how to fix this?
I got help from here, Javascript Marquee to replace <marquee> tags
Using the second answer
window.addEventListener('load', function () {
function go() {
i = i < width ? i + step : 1;
m.style.marginLeft = -i + 'px';
}
var i = 0,
step = 3,
space = ' ';
var m = document.getElementById('marquee');
var t = m.innerHTML; //text
m.innerHTML = t + space;
m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
var width = (m.clientWidth + 1);
m.style.position = '';
m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
m.addEventListener('mouseenter', function () {
step = 0;
}, true);
m.addEventListener('mouseleave', function () {
step = 3;
}, true);
var x = setInterval(go, 50);
}, true);
HTML
<div id="marquee">
1 Hello world! 2 Hello world! 3 Hello world!
</div>
CSS
#marquee {
background:#eee;
overflow:hidden;
white-space: nowrap;
}
This problem relates to your button being within an UpdatePanel as you mentioned in the comments above. An UpdatePanel will cause the page to postback without re-triggering the PageLoad event, so any javascript tied to that will be lost.
However, you can use a PageRequestManager. This will allow us to also trigger a function on UpdatePanel postback. This allows us to run the pageload script both on initial load and UpdatePanel postback. The only caveat is that the script block has to come after your ScriptManager. I'd suggest moving it just before your </body> if possible.
Basic example:
//Add a page request manager
var prm = Sys.WebForms.PageRequestManager.getInstance();
//On postback of UpdatePanel
prm.add_endRequest(function () {
alert("UpdatePanel was just triggered!");
});
//On pageload
window.addEventListener('load', function () {
alert("Initial page load!");
}, true);
Your example:
//Because we now have to call our function on both Page Load AND UpdatePanel postback, let's put it in function
function pageInit() {
function go() {
i = i < width ? i + step : 1;
m.style.marginLeft = -i + 'px';
}
var i = 0,
step = 3,
space = ' ';
var m = document.getElementById('marquee');
var t = m.innerHTML; //text
m.innerHTML = t + space;
m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
var width = (m.clientWidth + 1);
m.style.position = '';
m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
m.addEventListener('mouseenter', function () {
step = 0;
}, true);
m.addEventListener('mouseleave', function () {
step = 3;
}, true);
var x = setInterval(go, 50);
}
//Add a page request manager
var prm = Sys.WebForms.PageRequestManager.getInstance();
//On postback of UpdatePanel
prm.add_endRequest(function () {
pageInit();
});
//On pageload
window.addEventListener('load', function () {
pageInit();
}, true);
If there are certain things you only want to happen on the initial load and not on the UpdatePanel postback, you can take them out of the pageInit() function and put them back in your load event instead.
This question has been asked before, in different context (works in Firefox, not Chrome).
My show/hide functions are not working in Firefox, but they are working fine in Chrome. Technically, it works ONCE in Firefox, then it will not work again until I refresh the page. Again, works fine in Chrome and Internet Explorer.
jQuery v1.11.1
Firefox v40.0.3
Chrome v45.0.2454.93
**** UPDATE: **** I fixed the problem: I replaced the code under "jQuery" with the following code.
/* Show Product Overlay */
function enlargeProduct() {
$('#productOverlay').toggle('fast', 'linear', 'closeProductOverlay()');
}
function closeProductOverlay() {
/* Hide Product Overlay */
$(document).on('click', function (event) {
if (!$(event.target).closest('#clickControl').length) {
$('#productOverlay').hide();
}
});
}
jQuery -- OLD CODE that didn't work:
function enlargeProduct() {
/* Show Hidden Div Overlay */
$('#productOverlay').show();
};
function closeProductOverlay() {
/* Hide Product Overlay */
$(document).on('click', function (event) {
if (!$(event.target).closest('#clickControl').length) {
$('#productOverlay').hide();
}
});
}
HTML to Show/Hide
<!-- Product Overlay -->
<div id="productOverlay" onclick="closeProductOverlay()">
<div id="mobiPadding">
<div id="productContainer">
<div id="clickControl">
<input type="number" onchange="addQuantity()" value="1" min="1" max="99" />
<input type="button" class="btn btn-primary" onclick="addToCart()" value="Add to Cart" />
</div>
</div>
</div>
</div>
HTML Control - This is the div container into which I populate the HTML
<div class="item-container container">
</div>
Javascript to Populate HTML Control
var item = document.getElementsByClassName("item-container")[0];
var items = json.items;
for (var i = 0; i < items.length; i++) {
/* Outermost Div - For Bootstrap Formatting */
var div = document.createElement("div");
var divClass = document.createAttribute("class");
divClass.value = "col-md-3";
div.setAttributeNode(divClass);
item.appendChild(div);
/* Center Div - For adding Padding to each box */
var div2 = document.createElement("div");
var divClass = document.createAttribute("class");
divClass.value = "itemDiv";
div2.setAttributeNode(divClass);
div.appendChild(div2);
/* Innermost Div - For Adding Hover Effects (Not visible, functionality only) */
var hoverDiv = document.createElement("div");
var divClass = document.createAttribute("class");
divClass.value = "hoverDiv";
hoverDiv.setAttributeNode(divClass);
divClass = document.createAttribute("onmouseover");
divClass.value = "onMouseOver(" + i + ")";
hoverDiv.setAttributeNode(divClass);
divClass = document.createAttribute("onmouseout");
divClass.value = "onMouseOut(" + i + ")";
hoverDiv.setAttributeNode(divClass);
/* Add new ID iteration to identify selected product for button toggle */
var divId = document.createAttribute("id");
divId.value = "btn" + i;
hoverDiv.setAttributeNode(divId);
div2.appendChild(hoverDiv);
/* Add clearfix to clear formatting after each fourth iteration */
if (i >= 0) {
var j = i - 3;
if (j % 4 == 0) {
var clearfix = document.createElement("div");
var fixClass = document.createAttribute("class");
fixClass.value = "clearfix";
clearfix.setAttributeNode(fixClass);
item.appendChild(clearfix);
}
}
/* Title */
var h2 = document.createElement("h4");
h2.innerHTML = items[i].title.text;
hoverDiv.appendChild(h2);
/* Class */
var titleClass = document.createAttribute('class');
titleClass.value = "titleClass";
h2.setAttributeNode(titleClass);
/* Image */
var img = document.createElement("img");
var src = document.createAttribute('src');
src.value = items[i].image.text;
img.setAttributeNode(src);
hoverDiv.appendChild(img);
/* Class */
var imageClass = document.createAttribute('class');
imageClass.value = "imageClass";
img.setAttributeNode(imageClass);
/* Description */
var p = document.createElement("p");
p.innerHTML = items[i].description.text;
hoverDiv.appendChild(p);
/* Class */
var descClass = document.createAttribute('class');
descClass.value = "descriptionClass";
p.setAttributeNode(descClass);
/* Price */
var price = document.createElement("p");
price.innerHTML = items[i].price.text;
hoverDiv.appendChild(price);
/* Class */
var priceClass = document.createAttribute('class');
priceClass.value = "priceClass";
price.setAttributeNode(priceClass);
/* Hidden Click to Enlarge Product Button - Show/Hide on Hover*/
var productButton = document.createElement("div");
productButton.innerHTML = '<input id="productBtn' + i + '" onclick="enlargeProduct()" class="productBtn btn btn-primary" value="Click to Enlarge"/>';
hoverDiv.appendChild(productButton);
};
/* DOM Event Listeners - Handle Mouse Over/Out to Toggle Button and Product Overlays */
function onMouseOver(i) {
$('#productBtn' + i).show();
}
function onMouseOut(i) {
$('#productBtn' + i).hide();
}
I populate the item array with JSON. Is this necessary to include as well? Essentially they are set up like this:
var json = {
"items": [
{
"title": { "text": "#PART0001" },
"image": { "text": "../items/sale-october/PART0001.jpg" },
"description": { "text": "Item Description" },
"price": { "text": "$99.99" }
}
]
};
I'm especially confused, because I used this exact method for another section of my website (show/hiding a signup form), and that works just fine.
Soooo what am I doing wrong here? =/
Solved it:
Replaced the code under jQuery with the following:
/* Show Product Overlay */
function enlargeProduct() {
$('#productOverlay').toggle('fast', 'linear', 'closeProductOverlay()');
}
function closeProductOverlay() {
/* Hide Product Overlay */
$(document).on('click', function (event) {
if (!$(event.target).closest('#clickControl').length) {
$('#productOverlay').hide();
}
});
}
Seems that toggle is a way better way to do this. Still not entirely sure why the original didn't work, but I am happy! Hope this helps someone!
I wanted to add a extra button "HD" near caption inside html5 player.
Added this piece of code inside mediaelementplayer.js file.
//HD button display starts
(function ($) {
$.extend(MediaElementPlayer.prototype, {
buildcontextmenu: function (player, controls, layers, media) {
// create HD button
$('<div class="mejs-button mejs-hd-button"><span>HD<span/></div>')
.appendTo(controls);
}
});
})(mejs.$);
//HD button display stops
can anyone help to solve this issue?
As of now mediaelementplayer.js by johndyer doesnot support HD on/off button.
Reference http://mediaelementjs.com/ by johndyer
You need to do it as follows (this is an example for a Loop button):
MediaElementPlayer.prototype.buildloop = function(player, controls, layers, media) {
var
// create the loop button
loop =
$('<div class="mejs-button mejs-loop-button ' + ((player.options.loop) ? 'mejs-loop-on' : 'mejs-loop-off') + '">' +
'<span></span>' +
'</div>')
// append it to the toolbar
.appendTo(controls)
// add a click toggle event
.click(function() {
player.options.loop = !player.options.loop;
if (player.options.loop) {
loop.removeClass('mejs-loop-off').addClass('mejs-loop-on');
} else {
loop.removeClass('mejs-loop-on').addClass('mejs-loop-off');
}
});
}
Then, when creating your video player you can just add your variable to the features list for example:
$('video,audio').mediaelementplayer({
features: ['loop','playpause','current','progress','duration','fullscreen'],
alwaysShowControls: true,
});
Thank you #Sam, i used your code and wrote a vanilla version of your solution. This one adds two buttons to adjust the volume, a plus and a minus button, to make 10 steps for adjustment. (mediaelementjs 4.2.8)
Javascript:
var audio_player = document.getElementById('audio-player').children[0];
MediaElementPlayer.prototype.buildvolume_plus = function(player, controls) {
var
volume = document.createElement('div'),
volume_button = document.createElement('button');
volume.className = 'mejs__button mejs__volumeplus-button';
volume_button.type = 'button';
volume.appendChild(volume_button);
controls.appendChild(volume);
volume_button.addEventListener('click', function() {
player.setVolume( player.volume < 1 ? Math.round( (player.volume + .1 ) * 10) / 10 : 1 );
})
};
MediaElementPlayer.prototype.buildvolume_minus = function(player, controls) {
var
volume = document.createElement('div'),
volume_button = document.createElement('button');
volume.className = 'mejs__button mejs__volumeminus-button';
volume_button.type = 'button';
volume.appendChild(volume_button);
controls.appendChild(volume);
volume_button.addEventListener('click', function() {
player.setVolume( player.volume > 0 ? Math.round( (player.volume - .1 ) * 10) / 10 : 0 );
})
};
new MediaElementPlayer(audio_player);
HTML:
<div id="audio-player">
<audio src="http://example.com" width="220" height="60" controls data-mejsoptions=\'{"features": ["playpause", "volume_plus", "volume_minus"]}\'></audio>
</div>
am trying to use javascript for custom styled select boxes from www.gerrendesign.com/entry_images/selectboxdemo.zip
and as I have plenty entries inside one of select box I need to make but am stuck in creation of scrolling function.
As this select boxes are compatible with almost all older and new browsers. I need only suggestion or solution how to add scroll in this linked/attached files above - if select box is populated with plenty of entries (example cities, states, or exchange rates...)
Am stuck here...
Thanks for your cooperation
Ivan
THIS IS CODE:
$(document).ready(function(){
// first locate all of the select tags on the page and hide them
$("select.changeMe").css('display','none');
//now, for each select box, run this function
$("select.changeMe").each(function(){
var curSel = $(this);
// get the CSS width from the original select box
var gddWidth = $(curSel).css('width');
var gddWidthL = gddWidth.slice(0,-2);
var gddWidth2 = gddWidthL - 28;
var gddWidth3 = gddWidthL - 16;
// build the new div structure
var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
//get the default selected option
var whatSelected = $(curSel).children('option:selected').text();
//write the default
var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 + 'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">';
// create a new array of div options from the original's options
var addItems = new Array();
$(curSel).children('option').each( function() {
var text = $(this).text();
var selVal = $(this).attr('value');
var before = '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0" style="width:' + gddWidth3 + 'px;">';
var after = '</a></li>';
addItems.push(before + text + after);
});
//hide the default from the list of options
var removeFirst = addItems.shift();
// create the end of the div selectbox and close everything off
var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
//write everything after each selectbox
var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
$(curSel).after(GDD);
//this var selects the div select box directly after each of the origials
var nGDD = $(curSel).next('div.selectME');
$(nGDD).find('li:first').addClass("first");
$(nGDD).find('li:last').addClass('last');
//handle the on click functions - push results back to old text box
$(nGDD).click( function(e) {
var myTarA = $(e.target).attr('rel');
var myTarT = $(e.target).text();
var myTar = $(e.target);
//if closed, then open
if( $(nGDD).find('li').css('display') == 'none')
{
//this next line closes any other selectboxes that might be open
$('div.selectME').find('li').css('display','none');
$(nGDD).find('li').css('display','block');
//if user clicks off of the div select box, then shut the whole thing down
$(document.window || 'body').click( function(f) {
var myTar2 = $(f.target);
if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
});
return false;
}
else
{
if (myTarA == null){
$(nGDD).find('li').css('display','none');
return false;
}
else {
//set the value of the old select box
$(curSel).val(myTarA);
//set the text of the new one
$(nGDD).find('span.gselected').text(myTarT);
$(nGDD).find('li').css('display','none');
return false;
}
}
//handle the tab index functions
}).focus( function(e) {
$(nGDD).find('li:first').addClass('currentDD');
$(nGDD).find('li:last').addClass('lastDD');
function checkKey(e){
//on keypress handle functions
function moveDown() {
var current = $(nGDD).find('.currentDD:first');
var next = $(nGDD).find('.currentDD').next();
if ($(current).is('.lastDD')){
return false;
} else {
$(next).addClass('currentDD');
$(current).removeClass('currentDD');
}
}
function moveUp() {
var current = $(nGDD).find('.currentDD:first');
var prev = $(nGDD).find('.currentDD').prev();
if ($(current).is('.first')){
return false;
} else {
$(prev).addClass('currentDD');
$(current).removeClass('currentDD');
}
}
var curText = $(nGDD).find('.currentDD:first').text();
var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
switch (e.keyCode) {
case 40:
$(curSel).val(curVal);
$(nGDD).find('span.gselected').text(curText);
moveDown();
return false;
break;
case 38:
$(curSel).val(curVal);
$(nGDD).find('span.gselected').text(curText);
moveUp();
return false;
break;
case 13:
$(nGDD).find('li').css('display','none');
}
}
$(document).keydown(checkKey);
}).blur( function() {
$(document).unbind('keydown');
});
});
});
You could render the list inside a div, that has either a fixed height or a max-height (depending on your cross-browser requirements). Presuming the default scroll bar is ok...
If structure is something in the direction of
<div class="select_data_container">
<ul class="select_rows">
<li>row1</li>
<li>row2</li>
</ul>
</div>
CSS-example could be
.select_data_container {overflow-y: auto; height: 200px;}
.select_rows {display:block;}