JavaScript - Help!! Display = None Not Working

Hi All,

I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things.

On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below.

*working* link
http://pics.boasbysatyra.com/access/spiders.php
This one only works in FF, and the clip area is offset badly.

Here is the template for the zc code:

Code:

<div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>

And the JS for the page:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}

Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();
    $('#menu li a').click(function() {
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            //return false;
            }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
}
$(document).ready(function() {
    initMenu();
});

Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area!

http://jb.boasbysatyra.com/forum-pic...cs/nature.html

Code:

div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>
</div>

On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking...

Here is the JS:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');

$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
        //When page loads...
        $(".tab_content").hide(); //Hide all content
//      $("ul.tabs li:first").addClass("active").show(); //Activate first tab
//      $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul.tabs li").click(function() {

                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content

                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                return false;
        });

});
(function($) {
   $(document).ready(function(){
 $('.menu1').ptMenu();
       $('.menu2').ptMenu({vertical:true});
   });
})(jQuery);

I have taken a look at this for a few days and tried many things with no luck, any help is appreciated.

Thanks!

Ok, here's the page as it is right now:
http://www.crackin.com/dev/index.php

The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/
The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/
And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images.

I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing...

First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine.

Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing.

Thanks for any help.

I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me?

Thanx in advance.

hereis the html file and javascripton click of this button a
html *****************************
<table class=matcolor id=topnav cellspacing=0
cellpadding=0 width=550 border=0 bgcolor="#FFCCCC">
<tbody>
<tr align=middle>
<td id=menu1
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Desk Top Publishing </font></div>
</td>
<td width=1 bgcolor=#ff9900 class="mat"></td>
<td id=menu2
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Transcription</font></div>
</td>
<td width=1 bgcolor=#ff9900 class="mat"></td>
<td id=menu3
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Accounts Processing </font></div>
</td>
</tr>
</tbody>
</table>
*****************************************

<script language=JavaScript>
ix = document.getElementById('tblmenu1').getBoundingClientRect();
new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10);
</script>
**any thing i have to alter to work in firefox
please help

I'm trying to set an if statement so if one element is set to display:none, another element(s) sets margin-left to a certain number of pixels.

Sort of like this (however, it's not working):

Code:

<script>
if (document.getElementById('#why-choose-content').style.display = 'none') {
document.getElementById('#always-content').style.margin-left = '335px';
}
</script>

Here is the site in question: http://bit.ly/8XfM0Q

You can get a better idea of what I mean by clicking the 'plus' icons for the three colored tabs above the main content. Or if anybody has a more elegant way to get the divs to toggle under their respective headers, I'd love to hear. Thank you.

Why isnt this working?

Code:

function display_form(obj) {
	var button_name = obj.id.split("dialog_");
	var t = document.getElementById(button_name[1] + '_form').style.visibility = 'visible';
	alert(t);
}

IE is saying:
Code:

id is 'null' or not an object

The navigation for the web site I'm doing requires JS to remotely work so I want to make some kind of back-up scenario. Basicly, how can I make it so my main navigation will only display if there is script?

One thought I had was put it in a div, hide it in the CSS, then use JS to show it but if there is a better way to do this I'd like to know.

Hello im using this code to display a countdowntimer

Code:

<script type="text/javascript">
            var timecd;
            timecd = document.getElementById('<%= Text1.ClientID %>').value;
            var GAME = ' | Hells Gate |';
            var OpenTimeCOUNTER = '';
            var TargetCOUNTER = document.getElementById('COUNTER');
            var SecondsCOUNTER = timecd;
            var TargetTimeCOUNTER = new Date();
            var TimeBeginnCOUNTER = TargetTimeCOUNTER.getTime();
            var TimeEndCOUNTER = TimeBeginnCOUNTER + (SecondsCOUNTER * 1000);
            TargetTimeCOUNTER.setTime(TimeEndCOUNTER);
            var DayCOUNTER = TargetTimeCOUNTER.getDate();
            var MonthCOUNTER = TargetTimeCOUNTER.getMonth() + 1;
            var YearCOUNTER = TargetTimeCOUNTER.getYear();
            if (YearCOUNTER < 999) YearCOUNTER += 1900;
            var hCOUNTER = TargetTimeCOUNTER.getHours();
            var mCOUNTER = TargetTimeCOUNTER.getMinutes();
            var sCOUNTER = TargetTimeCOUNTER.getSeconds();
            var fdayCOUNTER = ((DayCOUNTER < 10) ? "0" : "");
            var fmonthCOUNTER = ((MonthCOUNTER < 10) ? ".0" : ".");
            var fhCOUNTER = ((hCOUNTER < 10) ? "0" : "");
            var fmCOUNTER = ((mCOUNTER < 10) ? ":0" : ":");
            var fsCOUNTER = ((sCOUNTER < 10) ? ":0" : ":");
            var EndDateCOUNTER = fdayCOUNTER + DayCOUNTER + fmonthCOUNTER + MonthCOUNTER + "." + YearCOUNTER;
            var EndTimeCOUNTER = fhCOUNTER + hCOUNTER + fmCOUNTER + mCOUNTER + fsCOUNTER + sCOUNTER;
            var counterthing = window.setTimeout("CountDownCOUNTER()", 1000);

            function CountDownCOUNTER() {
                var CurrentDateCOUNTER = new Date();
                var CurrentTimeCOUNTER = CurrentDateCOUNTER.getTime();
                OpenTimeCOUNTER = Math.floor((TargetTimeCOUNTER - CurrentTimeCOUNTER) / 1000);
                var sCOUNTER = OpenTimeCOUNTER % 60;
                var mCOUNTER = ((OpenTimeCOUNTER - sCOUNTER) / 60) % 60;
                var hCOUNTER = ((OpenTimeCOUNTER - sCOUNTER - mCOUNTER * 60) / (60 * 60));
                var fhCOUNTER = ((hCOUNTER < 10) ? "0" : "");
                var fmCOUNTER = ((mCOUNTER < 10) ? ":0" : ":");
                var fsCOUNTER = ((sCOUNTER < 10) ? ":0" : ":");
                var TimeCOUNTER = fhCOUNTER + hCOUNTER + fmCOUNTER + mCOUNTER + fsCOUNTER + sCOUNTER;
                var OutputStringCOUNTER = TimeCOUNTER;

                if (OpenTimeCOUNTER <= 0) {
                    OutputStringCOUNTER = '<a href="Default.aspx">Refresh<\/a>';
                    window.clearTimeout(counterthing);
                }
                TargetCOUNTER.innerHTML = OutputStringCOUNTER;
                document.title = (OutputStringCOUNTER.substring(0, 2) == "<a") ? "!!!READY!!!" : OutputStringCOUNTER + GAME;
                counterthing = window.setTimeout("CountDownCOUNTER()", 1000);
            }
</script>

When im debuging the project it shows ok without any problems:

But when i host the website on the server i Get a NaN:NaN:NaN

Don't know what is hapening... any help would be great

Thanks Ricardo

Hello everyone. I'm using the script Old Pedant posted here (huge thanks man!), however, I'm looking to have the timer display six numbers at all times.

For example:

If the timer has 15 hours, 35 minutes, and 10 seconds left it is currently displaying as: 15:35:10 - Perfect!

If the timer has 5 hours, 35 minutes, and 10 seconds left it is currently displaying as: 5:35:10 - Humm, not so perfect.

In the second example, would like the timer to keep a zero in front of the hours when ever it drops below 10. So the second example should display as: 05:35:10.

Any help is greatly appreciated. Posted below is the modified code I'm using. Thanks!

Code:

<html>
<head>
<script type="text/javascript">
// really really simple to get the time from the server

// this is for an ASP server:
//var serverTime = <%= DateDiff("s",#1/1/1970#,Now())%>;

// PHP Servers: 
 var serverTime = <?php echo time(); ?>;

// serverTime will hold the number of seconds since 1/1/1970 0:00:00 as it is on the server
// we must adjust it to compensate for GMT offset
// My server is on Pacific Daylight Time, so 7 hours offset:
serverTime += 0 * 3600; // 7 hours, 3600 seconds per hour
// NOTE:  This adjustment MAY NOT be needed for PHP servers...I dunno.


//
// so calculate how far off the client is from the server:
var now = new Date();
var clientTime = now.getTime(); // number of *milliseconds* since 1/1/1970 0:00:00 on client
serverTime *= 1000; // convert server time to milliseconds, as well

// the client and server disagree by this much:
var clockOff = serverTime - clientTime; // could well be negative!  
// hopefully you can see, from basic algebra, that
//    serverTime = clientTime + clockOff

// we want target to be 0:00:00 of next day
var target = new Date( serverTime ); // serverTime in JS form
// so bump the day by one and leave time as 0,0,0:
target = new Date( target.getFullYear(), target.getMonth(), target.getDate() + 1 );

// and now ready for our timer countdown:
var ticker = null; // the interval timer

function countdown( )
{
    var clientNow = ( new Date() ).getTime();
    var serverNow = clientNow + clockOff; // see? this is where we use that offset!
    var millisLeft = target.getTime() - serverNow; // milliseconds until server target time
    var secsLeft = Math.round( millisLeft / 1000 );
    var timeLeft;
    var timeLeftWords;
    if ( secsLeft <= 0 )
    {
        timeLeftWords = "Expired!";
        timeLeft = "0 days 00:00:00";
        clearInterval( ticker );
    } else {
        var secs = secsLeft % 60;
        var minsLeft = Math.floor( secsLeft / 60 );
        var mins = minsLeft % 60;
        var hrsLeft = Math.floor( minsLeft / 60 );
        var hrs = hrsLeft % 24;
        var days = Math.floor( hrsLeft / 24 );
        timeLeftWords = days + " days, " + hrs + " hours, " + mins + " minutes, " + secs + " seconds";
        timeLeft =
                 + (hrs < 10 ? "0" : "" ) + hrs + ":"
                 + (mins < 10 ? "0" : "" ) + mins + ":"
                 + (secs < 10 ? "0" : "" ) + secs;
 
    }
    
    document.getElementById("ticktock").innerHTML = timeLeft;
}

function startup( )
{
    countdown(); // first time
    setInterval( countdown, 1000 ); // then once a second
}
</script>
</head>
<body onload="startup()">

Time: <span id="ticktock"></span><br/>

</body>
</html>

Hello everyone, I need help to show popup only once a day per user!
The Problem is that the users of my blog gets mad when the popup displays, so i only want to show it once a day. please add the codes to it fully and send it back over thanks!

[CODE]<link href='http://pwnagesource.netii.net/java/jquery.fancybox.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if lte IE 6]><link href="java/jquery.fancybox_ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<script src='http://pwnagesource.netii.net/java/jquery-1.4.3.min.js' type='text/javascript'/>
<script src='http://pwnagesource.netii.net/java/jquery.fancybox-1.3.4.js' type='text/javascript'/>
<script type="text/javascript">
$j = jQuery.noConflict();
$j.fn.countDown = function(settings,to) {
settings = jQuery.extend({
startFontSize: '14px',
endFontSize: '14px',
duration: 1000,
startNumber: 10,
endNumber: 0,
callBack: function() { }
}, settings);
return this.each(function() {
//where do we start?
if(!to && to != settings.endNumber) { to = settings.startNumber; }
//set the countdown to the starting number
$j(this).text(to).css('fontSize',settings.startFontSize);
//loopage
$j(this).animate({
'fontSize': settings.endFontSize
},settings.duration,'',function() {
if(to > settings.endNumber + 1) {
$j(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
}
else
{
settings.callBack(this);
}
});
});
};
</script>
<script type="text/javascript">
$j(function() {
$j.fancybox(
"<div style='margin-left: 20px;'></br><h3 style='background-color: #000; padding: 8px; color: white; text-shadow: white 1px 2px 2px;-moz-text-shadow: black 1px 2px 2px;-webkit-text-shadow: black 1px 2px 2px;font-weight: bold;font-family: \"Trebuchet MS\", Helvetica, Geneva, san-serif; font-size: 20px; '>TheEmoLab" | Subscribe To Our Newsletter!</h3><center></br><td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p></td><form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=theemolab/feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'><input name='uri' type='hidden' value='theemolab/feed'/><input name='loc' type='hidden' value='en_US'/><input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/><input alt='' class='mbtbutton' title='' type='submit' value='Submit'/></form></tr></tbody></table></center></br><hr style='padding-bottom: 0; margin: 0 0 7px 0;' /><p style='padding-bottom:0;text-align: center; font-weight: bold;margin-top: 0; padding-top:0;'>This dialog box will close in <span id='dialog_close_countdown'>30</span> seconds.</p></div>",
{
'autoDimensions' : false,
'width' : 500,
'height' : 215,
'overlayOpacity' : '0.8',
'overlayColor' : '#000',
'onComplete' : function() {
$j('#dialog_close_countdown').countDown({
startNumber: 30,
callBack: function(me) { $j.fancybox.close(); }
});
}
});
});
</script>[ICODE]

helow to all im new here?

iwant to ask on how to display the sum of the 20 numbers i allready get the everage but i want to display the sum together of the everage this my code..

<html>
<body>
<script type = "text/javascript">
var numtotal = parseInt(prompt("How many numbers do you want to sum up?",""));
var total = 0;
for (var i=0; i<numtotal; i++) {
var ans = parseFloat(prompt ("Enter a number", ""));
if ((isNaN(ans)) || (ans == "")) {
alert ("You must enter a number!! ");
i -- ;

}
else {total = total + ans/numtotal};
}
alert (total); // the total
</script>
</body>
</html>

any body help me please?

hi,

i am currently doing a program that will display the image continuously. the image name will be like pic1.jpg , pic2.jpg , pig3.jpg untill pic10.jpg

this is my code so far :

<html>
<head>
<script type="text/JavaScript">
var fileName;

function display()
{
fileName = new Array();
for( i=0; i<5; i++)
{
fileName[i] = new Image();
fileName[i].src = "screenshot_" + i + ".jpeg";
}
}
display();

</script>
</head>
<body>
</body>
</html>


but when i run it, it give me infinity loop, can anyone tell me what is the problem of that ? thanks in advance for the reply

Hi,
I thought this would be relatively simple, but it's more complicated than I thought, and I can't seem to find the question resolved anywhere.

My problem is that on my site I sometimes have promotions that will end at midnight. I have to physically change the code at midnight to remove the promotional material.

How would one go about using Javascript to only display a <div> during a certain time? Like "Use coupon code 123 to get free shipping! Good until midnight!" and set it to stop displaying that content at 12:00 AM. Then I could remove it the next day. Or the opposite, and have it take effect a midnight, etc.

I'm sure it's been done before, right?

Hi,

I have an application wherein for one page I want to display a Listbox on selection of a radio button.
There should be 2 radio buttons and when the user clicks on the 2nd one "My Process", a list box should be displayed with several options.

Can anybody pls help me with this as I'm a beginner to JS..


Many thanks
Pooja.

Hi There,

I am attempting to do a site which is of a similar format to a TV listings website.

Each day's schedule will be on a different HTM page (contained within an iFrame), and I would like it to display the current day's schedule on the appropriate day.

I have searched the forum, but can't find anything exactly like this (maybe I'm searching for the wrong thing), so any answers greatly appreciated.

Thanks,
Roz