JavaScript - Provide Alternate Content For Browsers/devices Without Flash

Hi,
On my website I use CSS Fixed Positioning, but unfortunately on many mobile devices in particular this doesn't work I'd like to be able to turn these into static (e.g. Go to bottom of page) on some devices, but I'm a bit stuck (The Div btw is called apDiv2)

So far I've got

Code:

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'BlackBerry')
{
     $("#apDiv2").css("position", "static");
};

but no dice. Does anybody know what I'm doing wrong? The full css file is at http://atomicbuilds.com/general.css

Thanks, Ed

P.S. Eventually I'd also like to change the actual positioning so -142px goes to 0px, so if anybody knows that that'd be great, but I'm more worried about this first

I am using this: http://www.crowdsavings.com/open-source/drawbox (http://page-test.co.uk/jquery.drawbox.js is the main JS file).

It works fine on desktop browsers, but there is an issue on every Touch mobile phone I have tried. When you draw on the canvas and then go to click a button off the canvas, it doesn't work. You need to touch off the canvas and then the button.

So using the demo above, if you draw on the canvas and then click the 'Clear Canvas' button, it doesn't work and you have to press it again. I have tried setting focus on the body and also detecting what the focus is when a touch action is performed, but no luck. I know the entire screen is responsive to touch and mouse events, where I would have thought it best to just make the canvas section respond to touch/mouse events.

Im working on a mobile site for a friend and im curious, can i trigger javascript events on screen flick (By flick i mean the way to scroll through homepage screens). Id love to run a few things like that but i dont know if thats possible. If it is is there a tutorial about i could look at?

Hello All,

I found lightbox to be very useful for certain things, however I was hoping someone could help me out with the code or point me to a tutorial that could do what I am looking for.

Similar to lightbox (http://lokeshdhakar.com/projects/lightbox2/) how you can click on an image to open a separate window to display a slideshow, however with lightbox you need to display all images that are included in the slideshow, i.e. thumbnails.

I was hoping to find a way to do something similar but without having to display all the images as thumbnails. I want to display only one picture which the user can click on that will open a new window and display a slideshow with multiple images.

If this possible? Can someone help me out with this?

Any tips or tricks or tutorials that can be shared with me I would greatly greatly appreciate it.

Many thanks,
bg

I am incorporating this menu into a site and for desktop users I need the mouseover. However, after referencing the link below for mobile devices (most management has Blackberrys). I am concerned the mouseover will not work on their phones. How do I add an option that will work on phones - like mouseover OR click option?

http://www.quirksmode.org/m/table.html

Thanks!

hi guys, i was wondering if anyone could help me.
Ive been looking into the above and want to implement it on my site.

I have created no flash pages and flash pages, but instead of creating a portal at the front of the site that leads you to a flash site and a no flash site id like to do it so the page detects flash or not, and redirects to whichever URL.

Is this possible, or do multiple browsers cause problems ?

cheers

Hi there,

I'm working with leaflet.js to create a web map which is working well so far however I've run into a rookie js problem.

I have a js fiddle which shows my code here.

The problem I have is that I need convert a string like "polygon" to polygon without the quotation marks. According to the Leaflet API, removeLayer takes an iLayer parameter eg removeLayer( <ILayer> layer ). Currently I'm passing it a string which I feed through eval, I gather is less than ideal.

There is a post here on stack overflow but I can't make any sense of the answer unfortunately.

If anyone can provide any advice it would be greatly appreciated.
Thanks,
Rowan





Reply With Quote




01-07-2015, 12:50 PM #2
rnd me View Profile View Forum Posts Visit Homepage

Senior Coder Join Date Jun 2007 Location Urbana Posts 4,497 Thanks 11 Thanked 603 Times in 583 Posts

if you add Code:

window.circle=circle;
window.marker=marker;
window.polygon=polygon;

then you can use syntax like layerClicked = window[event.target.value]; instead of eval.

you can use a different object than window, as long as it's global and consistent.

I have written JS , in which I used activex control which does not work on mozila , anyone has idea to to same thing without activex , here is code which just upload the textfile contains on html page .


<html>
<head>
<script type="text/javascript" language="javascript">
function Read()
{
var Scr = new ActiveXObject("Scripting.FileSystemObject");
var CTF = Scr .OpenTextFile("J:\\Users\\Karimkhan\\Desktop\\2011-03-01.txt", 1, true);
data = CTF .ReadAll();
document.write("<pre>" + data + "<pre>");
//alert(data);
CTF .Close();
}
</script>
</head>
<body onLoad="Read()">
</body>
</html>

I'm trying to make these two messages change every two seconds. I'm not sure if the setInterval needs to be outside of the function. Also, not sure about HTML action"". It's not working and I'm not sure where my mistakes are. Very frustrating. I know it's easy for some of you, please help!


<script type="text/javascript">

var curMessage="message1";
var changeMessage="message2";

function adMessage()
{
if (curMessage)
{document.getElementbyId("message").value = "Place your Thanksgiving orders today!";
changeMessage; setInterval ('adMessage()',2000);

}
else (changeMessage);
{document.getElementbyId("message").value = "All orders must be received by November 20th!";
curMessage; setInterval ('adMessage()',2000);
}
}

</script>
</head>


<body onload="adMessage();">
<h1>Forestville Foods</h1>
<h2>Party Platters</h2>
<form name="advertising" action="adMessage">
<input type="text" name="message" size="60"
value="Place your Thanksgiving orders today!" />
</form>

Hi,

Is there away to alternate DIV rows in a specific section. When I try to alternate the DIVs it alternates everything that is a DIV on the page. I want to just alternate a DIV table.

Is this possible?

Thanks alot
Joe

Hey all-
I've gotten accustomed to using coda slider 2.0 to do some cool interactive sliding elements on my pages. However, i need something similar that will fade instead of slide. I've searched all over their home forums and it seems like no one there has an answer for how to implement the change in the current codaslider infrastructure. (http://www.ndoherty.biz/demos/coda-slider/2.0/)

I need something that has all the functionality of coda slider (easy transitions, div's containing lots of content- both images and text, forward/back buttons, autoplay) but with a fade transitions

any ideas?

Hello

I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes.

For example:

if select box 1 = a and select box 2 = a then open new window with URL 1
if select box 1 = a and select box 2 = b then open new window with URL 2
if select box 1 = b and select box 2 = a then open new window with URL 3
if select box 1 = b and select box 2 = b then open new window with URL 4

Any help would be greatly appreciated.

Thanks

Daniel

Hi, I am just about at wits end, and I am hoping someone here will be able to assist. I've searched and searched and have come close but to no avail. I found a nice image gallery code from "David's Kitchen" http://monc.se/kitchen/80/lightweigh...ith-thumbnails and have tweaked it to eactly what I wanted, however, I want to add an image caption of the alternate image text below the active picture. I've tried everything I could think of (with my limited knowledge) with no success. Any help would be GREATLY appreciated.

Here is the code I have:

Code:

<html>
<head>
    <style media="screen,projection" type="text/css">

/* begin gallery styling */
#jgal { list-style: none; width: 400px; position: relative; top: -12px; left: 40px; }
#jgal li { opacity: .5; float: left; display: block; width: 80px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { width: 80px; height: 60px; }
#jgal li.active img { display: block; float: left; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

    </style>
    <!--[if lt IE 8]>
    <style media="screen,projection" type="text/css">
        #jgal li { filter: alpha(opacity=50); }
        #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
    </style>
	<![endif]-->
    <script type="text/javascript">        document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
    <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
    <script type="text/javascript">
        var gal = {
            init: function () {
                if (!document.getElementById || !document.createElement || !document.appendChild) return false;
                if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
                var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement('img');
document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
  li[0].className = 'active';
  for (i = 0; i < li.length; i++) {
    li[i].style.backgroundRepeat = 'no-repeat';
    li[i].title = li[i].getElementsByTagName('img')[0].alt;
    gal.addEvent(li[i], 'mouseover', function () {
       var im = document.getElementById('jgal').getElementsByTagName('li');
       for (j = 0; j < im.length; j++) {
          im[j].className = '';
                        }
                        this.className = 'active';
enlargedImg.src = this.getElementsByTagName('img')[0].src;
              });
           }
        },
      addEvent: function (obj, type, fn) {
             if (obj.addEventListener) {
                 obj.addEventListener(type, fn, false);
           }
            else if (obj.attachEvent) {
                obj["e" + type + fn] = fn;
                obj[type + fn] = function () { obj["e" + type + fn](window.event); }
                obj.attachEvent("on" + type, obj[type + fn]);
        }
    }
        }
        gal.addEvent(window, 'load', function () {
            gal.init();
        });
    </script>
</head>
<body>
<ul id="gallery">
    <li><a href="/bmfsweb/esg/image/Vactor Images2/industrial.htm" rel="nofollow" target="_blank"><img src="/bmfsweb/esg/image/Vactor Images2/2100_PLUS_PD_400w.jpg" alt="2100 Plus PD"></a></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_Plus_Fan_400w.JPG" alt="2100 Plus Fan"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2103_400w.jpg" alt="2103"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/F_Series_400w.jpg" alt="Front Hose Reel Jetter"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/Jetter_shrouded_400w.JPG" alt="Rear Hose Reel Jetter"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_PD_400w.JPG" alt="2100 Classic PD"></li>
    <li><img src="/bmfsweb/esg/image/Vactor Images2/2100_fan_400w.JPG" alt="2100 Classic Fan"></li>

</ul>
</body>
</html>

Again, any help is greatly appreciated.

Thanks,

Ben.

Hello

I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes.

For example:

if select box 1 = a and select box 2 = a then open new window with URL 1
if select box 1 = a and select box 2 = b then open new window with URL 2
if select box 1 = b and select box 2 = a then open new window with URL 3
if select box 1 = b and select box 2 = b then open new window with URL 4

Any help would be greatly appreciated.

Thanks

Daniel

Hey guys, I need help... I want to have this script

Code:

<script type = "text/javascript">
function runMyJavascript_Caught() 
{
// get user to add name
var name_entry = prompt ("Please Enter your Name!", "James");

// declare some short strings

var stating = ", I knew you did it!";
var told = "I told you that I would find out";
var mistake = "I guess you just made a mistake entering your name, ";
var punish = "Now go back to your room";
var heading = "OI Stop";

// construct some longer strings

var stating_name = name_entry + stating;
var mistake_name = mistake + name_entry;

document.writeln(heading.bold() + "<br>");
document.writeln(stating_name + "<br>");
document.writeln(told + "<br>");
document.writeln(mistake_name + "<br>");
document.writeln(punish + "<br>");
}
</script>

write on a button command. What can I use insted of document.write?