|
JavaScript - Is This Correct Behavior In Javascript/html5?
Sorry if this is the wrong forum for this question. I get confused about what forum to post a question in with regards to DHTML technologies since they are all frequently used together. Anyhoo, heres my question.
I've recently discovered an interesting behavior. When I mouse over a nested element it triggers the 'onmouseout' event handler of the parent element. Take the following code snippet, for instance: Code: <table>
<tr>
<td onmouseout="window.alert('you moused out of td');">
<img src="image0.gif" style="height:50px; width:50px;" />
</td>
</tr>
</table>
In the code snippet above, the 'onmouseout' event handler executes when you mouse over the image nested inside the <td> element. I wouldn't have thought this would be the appropriate behavior since from my perspective the mouse is still inside the <td> element. Can someone make comments on this. Thank You. Edit: I've discovered that mousing over a nested element causes both an 'onmouseout' and an 'onmouseover' event for the parent element. They are called back to back. Seems a little bit of an odd sequence of events but maybe it makes sense in the grand scheme of things. Yeah, right. Similar TutorialsHello, I am coding a slider for my portfolio which has divs that slide when you click either the arrow keys or the numbers below the slider's frame. I just can't figure out how to change the javascript/css file so that the current slide number, (the little numbers below the image), becomes a different color when you actively view it, so that it indicates to users number they're currently on. Thanks for help! Here's a draft of what it looks like so far in the front end with my grids still in place: HTML file: Code: <div id="slider" class="span-24 last">
<div id="slide2Left"> ←</div>
<div id="slideFrame">
<div id="slideBoard">
<!-- the slides -->
<div class="slidePoint">
Slide 1 Goes Here
</div>
<div class="slidePoint">
Slide 2 Goes Here
</div>
<div class="slidePoint">
Slide 3 Goes Here
</div>
<!-- end slideBoard -->
</div>
<div id="slideReference"></div>
<!-- end slideFrame -->
</div>
<div id="slide2Right" class="last"> →</div>
<!-- end slider section -->
</div>
Javascript code Code: // JavaScript Document
$(document).ready(function(){
var slideTime = 700;
var currentSlide = 1;
var totalSlides = $("#slideBoard > div").size();
var slideWidth = $('#slideFrame').css('width');
var slideAmount = parseInt(slideWidth);
function slideLeft(){
if(currentSlide > 1){
$("#slideBoard").animate({
left: ['+='+slideAmount, 'swing']
}, slideTime );
currentSlide += -1;
}
}
function slideRight(){
if(currentSlide < totalSlides){
$("#slideBoard").animate({
left: ['+=-'+slideAmount, 'swing']
}, slideTime );
currentSlide += 1;
}
}
function slideTo(slideNumber){
///*
slideNumber = parseInt(slideNumber);
slidePos = slideNumber -1;
var p1 = $('#slideBoard');
var position1 = p1.position();
var p2 = $('#slideBoard div:nth-child(' + slideNumber + ')');
//alert(p2.html());
var position2 = p2.position();
var slideFor = (-position1.left) - position2.left;
//alert('p1: '+ position1.left + ' p2: '+ position2.left + ' Sliding: '+slideFor);
$("#slideBoard").animate({
left: ['+='+slideFor, 'swing']
}, slideTime );
currentSlide = slideNumber;
//*/
}
$('#slide2Left').click(function(){
slideLeft();
});
$('#slide2Right').click(function(){
slideRight();
});
$(document).keydown(function(e){
if(e.keyCode == 37){
//alert( "left pressed" );
slideLeft();
return false;
}
if(e.keyCode == 39){
//alert( "rigt pressed" );
slideRight();
return false;
}
});
//# Slide Reference Tool
for(i = 1; i < (totalSlides+1); i++){
$('#slideReference').append('<div class="slideNumber">'+i+'</div>');
}
$('.slideNumber').click(function(){
slideTo($(this).html());
});
$(".slidePoint").touchwipe({
wipeLeft: function() { slideRight(); },
wipeRight: function() { slideLeft(); },
min_move_x: 20,
preventDefaultEvents: true
});
});
CSS Code Code: /* CSS Document */
#slider {
position: relative;
margin: 79px 0 50px 0;
height: 500px;
padding-bottom: 50px;
border-bottom: 1px solid #9B9B9B;
}
#slideFrame {
width:870px;
left: 40px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#test {
width:30px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#slideBoard {
position:absolute;
top:0px;
left:0px;
width:3000px;
min-height:400px;
margin:0px;
padding:0px;
background: #ccc;
opacity: .3;
}
.slidePoint {
width:870px;
min-height:400px;
height:410px;
display:inline-block;
margin:0px;
padding:0xp;
float:left;
}
.slidePoint p {
padding:5px;
}
#slide2Left, #slide2Right{
position:absolute;
top: 200px;
bottom: 5px;
cursor:pointer;
width:20px;
height:20px;
color:#9B9B9B;
border:#9B9B9B solid 1px;
border-radius: 5px;
padding:3px;
text-align:center;
display: inline-block;
}
#slide2Right{
left: 920px;
}
#slideReference {
position:absolute;
width: 770px;
min-height:10px;
bottom:5px;
left:50px;
text-align:center;
}
.slideNumber {
border-radius: 2px;
background:#929292;
color:#ffffff;
cursor:pointer;
display:inline-block;
padding:3px;
margin:3px;
text-align:center;
min-height:15px;
min-width:15px;
}
I am new to javascript (I started learning it today) so please explain it for newbies. I am trying to get the amount of video (in seconds) buffered already by the client and the whole duration of the video. Then, I divide them to get the precentage which was buffered so far. I have no problem storing the durating using: Code: var duration = document.getElementById('vid').duration
- returns "12.6" (seconds) I am struggling with getting the buffered time. I tried: Code: var buffered = document.getElementById('vid').buffered
This one returns "[object TimeRanges]". From what I understood this is some kind of an object (Like an array?). I tried returning "buffered.length" and I get "1" back. Please explain how I can do this. thanks I have a code that will randomly select a div from a list and inside of that div i want there to be a sound file. How would I use html5 and javascript to make it so that when a user clicks a button it would play whatever sound was associated with that button? Code: <div id="randomdiv1" class="article_example_div"> <embed src="Black Hawk Down - Music Video - Riot.mp3" width=25 height=25 autostart=false repeat=true loop=true></embed> </div> Hi! I couldn't find any information about this topic in the internet and I really wonder, how come people do not discuss it anywhere? Okay, jQuery works really great and offers many interesting effects, but what if you have JavaScript disabled? I mean I've browsed through several websites powered by jQuery with JS disabled and they doesn't work or behave weird. I know there aren't much people, who disable JS, but well I do want my page to be seen by all people in the end. I managed to do it with slider on my page (however I want to use other jQuery effects), but, for example, http://www.flowplaye...ools/index.html doesn't provide any information about this. Try to disable JS and see that nothing works. I can use <noscript></noscript> tag, but I have to make two main pages. And what if I want to view it on one page? What would you do? Regards, Aleks. Hi guys! I'm having trouble deciphering the javascript on my webpage www.laurahenderson.org is my website, and I'd like the nav bar to be closed when the site loads. Here is the code: Code: jQuery.noConflict(); jQuery(document).ready(function(){
//VAR SETUP
var rightBg = jQuery('#rightBg'),
boxStuff = jQuery('.boxStuff'),
bgControls = jQuery("#bgControls"),
nextImg = jQuery('#nextImg'),
prevImg = jQuery('#prevImg'),
blogNav = jQuery('#blogNav'),
navBox = jQuery("#navBox"),
navBoxa = jQuery("#navBox a"),
navHeight = navBox.height(),
firstImg = jQuery('.wrapperli:first-child'),
lastImg = jQuery('.wrapperli:last-child'),
//iPad,iPhone,iPod...
deviceAgent = navigator.userAgent.toLowerCase(),
iPhone = deviceAgent.match(/(iphone|ipod)/);
//CLOSE FUNCTION
function closeSesame(){
jQuery('.activeBox').fadeOut(600,function(){
navBox.animate({right:"0%",marginRight:"20px"},800).removeClass('openNav');
jQuery(".activeNav").removeClass('activeNav');
rightBg.animate({width:"0%"},800);//HIDE RIGHT BG
bgControls.fadeIn(600);
}).removeClass('activeBox');
}
//OPEN FUNCTION
function openSesame(){
navBox.addClass("openNav").animate({right:"50%",marginRight:"2px"},800);//ADD OPEN NAV
rightBg.animate({width:"50%"},800,function(){//SHOW RIGHT BG
jQuery('.activeBox').fadeIn(600);//ADD ACTIVE BOX & FADE IN
navBox.fadeIn(600);
});
bgControls.fadeOut(300);
}
//OPACITY STUFF
rightBg.css({opacity:".85"});
//REMOVE TITLE ATTRIBUTE
jQuery("#dropmenu a").removeAttr("title");
//MENU
jQuery("#dropmenu ul").css("display", "none"); // Opera Fix
jQuery("#dropmenu li").hover(function(){
jQuery(this).find('ul:first').show();
},function(){
jQuery(this).find('ul:first').hide();
});
jQuery("#dropmenu ul li ul").parent().children("a").prepend("<span style='float:right;'>›</span>");
//PRETTY PHOTO
jQuery("a[href$='jpg'],a[href$='png'],a[href$='gif']").not(".wrapperli a").attr({rel: "prettyPhoto"});
jQuery(".gallery-icon > a[href$='jpg'],.gallery-icon > a[href$='png'],.gallery-icon > a[href$='gif']").attr({rel: "prettyPhoto[pp_gal]"});
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animation_speed: 'normal', // fast/slow/normal
opacity: 0.35, // Value betwee 0 and 1
show_title: false, // true/false
allow_resize: true, // true/false
overlay_gallery: false,
counter_separator_label: ' of ', // The separator for the gallery counter 1 "of" 2
//theme: 'light_rounded', // light_rounded / dark_rounded / light_square / dark_square
hideflash: true, // Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto
modal: false // If set to true, only the close button will close the window
});
//WINDOW LOAD
jQuery(window).load(function(){
//REMOVE WIDTH AND HEIGHT ATTRIBUTES FROM IMAGES
jQuery('.attachment-full, .attachment-post-thumbnail, .attachment-gallery').removeAttr('height').removeAttr('width');
//LOAD MESH BG
jQuery('#mesh').fadeIn(600);
jQuery('#loading').fadeOut(600);
//IF GALLERY PAGE
if(jQuery('body').hasClass('page-template-page_gallery-php')){
navBox.fadeIn(600);
bgControls.fadeIn(600);
jQuery(".wrapperli:first-child a").click();
//IF NOT GALLERY PAGE
} else {
openSesame();
}
});
//FADE CRUMBS IN/OUT ON SCROLL
jQuery('#pageContent').scroll(function(){
if(jQuery('#pageContent').scrollTop()>150){
blogNav.fadeOut(300);
} else {
blogNav.fadeIn(300);
}
});
//NAV BOX STUFF
navBox.css({marginTop:"-"+navHeight/2+"px"});
boxStuff.css({marginTop:"-"+navHeight/2+"px"});
//NAV BUTTON CLICK
navBoxa.click(function(){
//VAR SETUP
var thisBox = jQuery(this).attr('href');
//IF ACTIVE LINK, CLOSE STUFF
if(jQuery(this).hasClass('activeNav')){
closeSesame();
return false;
//IF NOT ACTIVE LINK
}else{
//IF CONTENT OPEN
if(navBox.hasClass("openNav")){
navBoxa.removeClass('activeNav');//REMOVE CURRENT ACTIVE NAV
jQuery(this).addClass('activeNav');//ADD NEW ACTIVE NAV
jQuery('.activeBox').removeClass('activeBox').fadeOut(300,function(){//REMOVE CURRENT ACTIVE BOX & FADE OUT
jQuery(thisBox).addClass('activeBox').fadeIn(300);//ADD NEW ACTIVE BOX & FADE IN
});
//IF CONTENT NOT OPEN
} else {
jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
jQuery(thisBox).addClass('activeBox');
openSesame();
}
}
});
//CLICKING GALLERY IMG
jQuery(".wrapperli a").click(function(){
if(iPhone){
return false;
}else{
//GET HREF
var galleryHref = jQuery(this).attr('href'),
galleryTitle = jQuery(this).attr('title'),
imageInfo = jQuery('#imgInfo'),
itemNumber = jQuery(this).parent().index() + 1;
numberItems = jQuery('.wrapperli').length;
//CHANGE TITLE INFO
if(galleryTitle){
imageInfo.hide().html(galleryTitle + "  /  "+ itemNumber + " of " + numberItems).fadeIn(150);
} else {
imageInfo.hide();
}
//CHANGE CLASSES
jQuery(".wrapperli").not(this).removeClass('activeImg');
jQuery(this).parent().addClass('activeImg');
//IF MENU OPEN, CLOSE IT
if(navBox.hasClass("openNav")){ closeSesame(); }
//CHANGE BACKGROUND
jQuery.backstretch(galleryHref, {speed: 300});
return false;
}
});
//NEXT CONTROLS
nextImg.click(function(){
var activeImg = jQuery('.activeImg');
if(activeImg.length > 0){
if(activeImg.next().length > 0){
activeImg.removeClass('activeImg').next().addClass('activeImg').children().click();
} else {
activeImg.removeClass('activeImg');
firstImg.addClass('activeImg').children().click();
}
} else {
firstImg.addClass('activeImg').children().click();
}
return false;
});
//PREV CONTROLS
prevImg.click(function(){
var activeImg = jQuery('.activeImg');
if(activeImg.length > 0){
if(activeImg.prev().length > 0){
activeImg.removeClass('activeImg').prev().addClass('activeImg').children().click();
} else {
activeImg.removeClass('activeImg');
lastImg.addClass('activeImg').children().click();
}
} else {
firstImg.addClass('activeImg').children().click();
}
return false;
});
// Keyboard shortcuts
jQuery(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
if (unicode == 39) { nextImg.click();} // right arrow
else if (unicode == 37) {prevImg.click();} // left arrow
});
});
and I changed the open sesame to closed sesame here in the code Code: //IF CONTENT NOT OPEN
} else {
jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
jQuery(thisBox).addClass('activeBox');
openSesame();
}
}
});
but now when the page loads the navbar wont show up at all. Any help/insight would be much appreciated! On all my html 5 pages of http://www.countyfairgrounds.net I have a drop down javascript menu for selecting a state. The thing has worked for years fine. However in switching to html5 the validator will not validate it. The are saying the option tag is obsolete. First I don't java, I do html5 and css3 currently. Ca anyonepoint me to a script dropdown that I can cut and paste - that will validate?
How could I make it so that instead of seeing a embed object you would just see a input button that says play. I do not need my users to be able to pause them. I really didn't know where to start with the javascript but i do have the html5 Code: <audio controls="controls"> <source src="BlackHawkDown-MusicVideo-Frontline.wav" type="audio/wav" /> <source src="BlackHawkDown-MusicVideo-Frontline.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> THANKS!!!! I can play a sound on my local machine using the following code, but when I upload to a server the same code it does not play. I cannot work out why, the link below gives the code. The multi channel code is he http://www.storiesinflight.com/html5/audio.html I installed Firebug and insepcted the Net components and can see that the .wav files are being sought out but returning a 404 error. This would be fine, however the path being sought is correct. Clicking link does'nt play the sound, but removing the file and paring back to the directory brings you to the directory on the server and clicking the file does play the sound. The code works locally, and I simply cannot see what could be causing the issue in the server versions on both Firefox and Chrome. Hi there, I am just writing to see if I can receive some help regarding an issue I'm having? I have written this application: http://bit.ly/dOHwhp - It allows the user to make melodies and change the speed of playback. It uses HTML5 and JavaScript. What I'd really like to do is have the ability for the user to save the melody in some respect. At the moment, I am using a parse harsh method. I thought potentially the user could save the #... and then load it from the URL. I have a method of loading it from the URL but no current way of 'saving' it and loading the saved version, as such. I have a feeling it would be far more advanced but, I would love to have a download feature like they have on this site: http://patternsketch.com/ Could anyone help out? This is my JavaScript file as it stands (although all files can be discovered in the source code of the page) Code: // ===== VARIABLES =====
var isPlaying = false;
var curNote = 0;
var curTempo = 100;
// ===== FUNCTIONS =====
// playTune: Play the next note!
function playTune() {
if (isPlaying !== false) {
var nextNote = 60000 / curTempo / 4;
// Turn off all lights on the tracker's row
$("#tracker li.track").removeClass("active");
// Light up the tracker on the current track
$("#tracker li.track.col_" + curNote).addClass("active");
// Find each active note, play it
var tmpAudio;
$(".playBar[id^=control] li.track.active.col_" + curNote).each(function(i){
tmpAudio = document.getElementById($(this).data('sound_id'));
if (!tmpAudio.paused) {
// Pause and reset it
tmpAudio.pause();
tmpAudio.currentTime = 0.0;
}
tmpAudio.play();
});
// Move the track forward
curNote = (curNote + 1) % 16;
} // if (isPlaying)
} // playTune
// Make a new hash
function buildHash() {
// Start it
var newhash = '';
// For each track, check and add in a 0/1 as appropriate
$(".playBar[id^=control] li.track").each(function(i){
newhash += $(this).is('.active') ? '1' : '0';
});
// Separate it
newhash += '|';
// Now, toss in the note
newhash += $('#temposlider').slider('value');
// Check and see if we really need to update
if (location.hash != '#' + newhash) location.hash = newhash;
} // buildHash
// Read in our hash
function parseHash() {
if (location.hash.length > 0) {
// Split it up, work it out, removing the actual hashmark
var pieces = location.hash.substring(1).split('|');
// Set the lights
var lights = pieces[0];
$(".playBar[id^=control] li.track").each(function(i){
// Make sure we haven't exceeded
if (i >= lights.length) return false;
// Check our location, turn on class if need be
if (lights.charAt(i) == '1') {
$(this).addClass('active');
}
});
// Set the tempo
if (typeof pieces[1] !== 'undefined') {
$('#temposlider').slider('value', parseInt(pieces[1]));
$('#tempovalue').innerHTML = pieces[1];
curTempo = parseInt(pieces[1]);
}
}
} // parseHash
// Clear it!
function clearAll() {
$(".playBar[id^=control] li.active").removeClass('active');
}
// Run on DOM ready
$(document).ready(function(){
// Process each of the audio items, creating a playlist sort of setup
$("audio").each(function(i){
// Make a self reference for ease of use in click events
var self = this;
// Make a sub-list for our control
var $ul = $('<ul id="control_' + this.id + '" class="playBar">');
$ul.append('<li class="header">' + this.title + '</li>');
// Add 16 list items!
for (j = 0; j < 16; j++) {
var $li =
$('<li class="track col_'+j+'">'+self.id+'</li>')
.click(function(){
$(this).toggleClass('active');
buildHash();
})
.data('sound_id', self.id);
$ul.append($li);
} // for (i = 0; i < 16; i++)
// Append it up
$('<li>').append($ul).appendTo('#lights');
});
// Bind up a click for our button
$("#soundstart").click(function(){
if (isPlaying === false) {
// Start the playing!
curNote = 0;
isPlaying = setInterval(playTune, 60000 / curTempo / 4);
// Change our display
this.innerHTML = "Stop";
} else {
clearInterval(isPlaying);
isPlaying = false;
$("#tracker li.track").removeClass("active");
$("audio").each(function(){
this.pause();
this.currentTime = 0.0;
});
this.innerHTML = "Play";
}
});
$('#clearall').click(clearAll);
$('#reload').click(parseHash);
// ===== Misc =====
// Build or read the hash
if (location.hash == '') {
// I was building this at load - but now, no, just to be safe
//buildHash();
} else {
parseHash();
}
// Show our value, now that we've built off of the hash
$('#tempovalue').html(curTempo);
// Make our tempo slider
$('#temposlider').slider({
'value': curTempo,
'min': 30,
'max': 170,
'step': 2,
'slide': function(e, ui) {
curTempo = ui.value;
$('#tempovalue').html(curTempo);
if (isPlaying !== false) {
clearInterval(isPlaying);
isPlaying = setInterval(playTune, 60000 / curTempo / 4);
}
},
'stop': function(e, ui) {
buildHash();
}
});
});
I'm trying to create a demo to display a new way of showing our data. I thought I remembered this being pretty simple but I'm hitting a snag. The table, the mouse over, and the check row by clicking on the row all work separately but when the check row by clicking function is on, seen in the first row, the checkbox stops working. Any insight into why this may be true? Any help is greatly appreciated Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function selectRow(row) {
var firstInput = row.getElementsByTagName('input')[0];
firstInput.checked = !firstInput.checked;
}
</script>
</head>
<body>
<table id="tbl" border="2">
<thead>
<tr>
<td></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr onclick="selectRow(this)" onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
Hi everyone, I am trying to make an image mask using javascript. The basic idea is that the image on the canvas will appear as a black box. When the user hovers over the image a small part of it is revealed. I have attached a picture as an example because its quite hard to explain! Any help would be appreciated! Thanks, Luke How to make request "rtsp://localhost:554/sample_100kbit.mp4"? (in HTML5 or Javascript) I want to access video streaming data which source is present on Darwin server
I need to be able to drag an image from one browser window to a form text input in a different window, populating it with the image file name. I can do this easily, except that the result is the whole url, and I only want the filename to be inserted. In other words, it inserts http://www.path/path/file.jpg, but I just want to end up with file.jpg. I believe the file object .name property holds the info I need, but I don't know how to populate the input field with it. Any help appreciated. Hi, I'm using javascript in addition to a web service (BTBuckets) to display different content to visitors based on actions they take on my site. The javascript is working fine, but I noticed that if I simulate BTBuckets being disabled using Firefox Adblock none of the content shows up. So in the off chance of the service going offline it'll leave some pretty funky holes in the my content. I tried <noscript> tags which works with javascript off, but the content is still blank when I disable BTBuckets. I'm wondering if there's a way to display the default content if the service is unavailable? Here's the code I'm using: In the head: Code: <script type="text/javascript">
//<![CDATA[[
$BTB={s:XXXXX};
$BTB.jsh="http://static.btbuckets.com/bt.js";
//]]>
</script>
<script type="text/javascript">
document.write(unescape("%3Cscript src='" + $BTB.jsh.replace(/(https?:)/i,document.location.protocol) + "' type='text/javascript'%3E%3C/script%3E"));
</script>
The code in the body used to replace an image depending on visitor behavior: Code: <script type="text/javascript">
var _t = "";
if ($BTB.clusters["ppc_visitors"]) {
_t = "\"images/top-photo-tracking-number.jpg\" alt=\"Call Toll-Free: 1-800-XXX-XXXX\">";
} else {
_t = "\"images/top-photo.jpg\" alt=\"Call Toll-Free: 1-800-XXX-XXXX\">";
}
document.write('<img src= ' + _t );
</script>
<noscript><img src="images/top-photo.jpg" alt="Call
Toll-Free: 1-800-XXX-XXXX"></noscript>
Hello coding forum users, I am working on the only javascript chapter of my HTML textbook. It asks me to: Quote: replace the line <img id="sky" src="sky0.jpg" alt=""/> with a script element that writes the following HTML code: <img id='sky' src='mapNum.jpg' alt=' ' /> where mapNum is the value of the mapNum variable. so I try PHP Code: <script type="text/javascript" /> document.write("<img id='sky' src='mapNum.jpg' alt=' ' />") </script> after a few other attempts I search codingforums and find: PHP Code: document.write("<img id=\"sky\" src='sky"+mapNum+".jpg' alt='' />"); and PHP Code: document.write('<img id="sky" src="sky'+mapNum+'.jpg" alt="" />'); and these work perfectly fine but I don't understand why? my textbook only has one javascript chapter and its really small and vague, and my teacher hasn't answered my emails, so I would be grateful if anyone can tell my why my first code falls flat. I found and am using the following script to add checkbox values to a textarea. Code: <script type="text/javascript">
function add_sub(el){
if (el.checked)
el.form.elements['type'].value+=el.value;
else{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>
</head>
<body>
<form name="form1" method=post>
<textarea name="type" rows="5" cols="35" onclick="this.focus();this.select();">
</textarea><br>
<input type="checkbox" name="bob" id="bob" value="<p>" onclick="add_sub(this);"><label for="bob"><p></label><br>
<input type="checkbox" name="bob1" id="bob1" value="<span>" onclick="add_sub(this);"><label for="bob1"><span></label><br>
<input type="checkbox" name="bob2" id="bob2" value="<div>" onclick="add_sub(this);"><label for="bob2"><div></label>
That is working. However, I wanted to put carriage returns after each checkbox value added, so I added the + "\r\n" as follows: Code: <script type="text/javascript">
function add_sub(el){
if (el.checked)
el.form.elements['type'].value+=el.value + "\r\n";
else{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>
That is working when adding the value, but removing the value when the checkbox is unchecked is not working. I know the regular expression, etc. needs to be updated to account for the carriage returns, but I have tried everything I can think of and cannot get it to work. Help correcting the code is appreciated. Whats wrong with the code below? I'm trying to get the email service provider name. Code: <html>
<head>
<script type="text/javascript">
function GetProvider {
var fullemail = openinviter.email_box.value;
var afterat = fullemail.split("@");
var Provider = afterat[1].split(".");
var showit = Provider[0];
openinviter.provider_box.value=showit;
}
</script>
</head>
<body>
<form action="" method="post" name="openinviter">
<input type="text" name="email_box" onchange="GetProvider()" />
<input type="text" name="provider_box" value="">
</form>
</body>
</html>
Thanks alot! Hey guys, I am doing a website and the way it is suppose to work is when you click on a link there is a little triangle beside it, so when you click on it the triangle is suppose to face down but more links appear when you click on it. Anyways here is the code if someone could please tell me what im doing wrong? HTML Code: <ul class="menu" id="subnavmenu">
<li><a href="#" onClick="showHide('sublist1');return false;" id="subheading">About Us</a>
<ul id="sublist1" style="display:none;">
<li><a href="#">Visit Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Archives Unboxed and Revealed</a></li>
</li>
</ul>
CSS Code: #subnavmenu ul.menu { display: block; overflow:hidden; }
JAVASCRIPT Code: function showHide(element_id) {
if (document.getElementById && document.getElementById(element_id) && document.getElementById(element_id).style) {
var menu = document.getElementById(element_id);
var arrow = document.getElementById(element_id + '_arrow');
if (menu.style.display == "block") {
menu.style.display = "none";
if (arrow.src) { arrow.src = arrow.src.replace("down","right"); }
}
else {
menu.style.display = "block";
if (arrow.src) { arrow.src = arrow.src.replace("right","down"); }
}
}
}
Box 1 - Box 2 / Box 3 and i put a round off number so the decimals dont give a million numbers the problem is...the math is wrong now.... someone please help me fix this.. <!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> <title>Calc</title> <script type="text/javascript"> function calculate() { var one = document.getElementById("one").value*1; var two = document.getElementById("two").value*1; var three = document.getElementById("three").value*1; document.getElementById("answer").value=((one-two)/three); ; } </script> </head> <body> Enter Number 1 <br> <br><input type="text" id="one" /><hr>Enter Number 2<br><br><input type="text" id="two" /><br><br><hr>Enter Average number<br><br><input type="text" id="three" /><br><br><button onclick="calculate();">Calculate</button> <br id="result"></center></br> Total <input type="text" readonly="readonly" id="answer" /><br><br></center> </body> </html> </td> </tr> </table> </center> </body> </html> |
|||||||