Using Behaviors on a Mobile Device

Actually I'm having a couple of issues with Behaviors, but the first is specifically related to Mobile Devices.

My site is https://finditallemall.com

It is a very large and complicated website incorporating 4 additional sub-domains that feed iFrame pages to the main site.

The site has 3 different versions of index pages, one each for Desktop, Laptop and Mobile Devices. When it loads it comes up on the Mobile Device Index as a default, but under the Options Tab there is an option for Device that will reload the site with one of the other Index pages.

Actually, there are 36 Index pages, of 3 different formats each having 12 different Skins; although at the moment the Laptop Index pages and the Mobile Index pages are virtually identical.

The site was built with the Desktop in mind, and the Mobile page was created later using elements from the Desktop page. In the lower left corner of the Mobile page (the default page the site loads to) there are a group of objects, that work using Behavior and Action, to slide a Panel out from under an iFrame. When the mouse is over this group, the title "Ambience" will appear, and there is also a Mouse Over function on the Blue and Red Chevron Buttons that "Open" and "Close" the object panel/tray. An invisible square over the Blue Chevron Button has a Behavior that Triggers the Action on the Panel Object to follow the Path and slide out from under the main iFrame in the page.

My problem is that the "buttons" work fine when using a mouse, but do not work on Touch Devices. How do I get a Behavior to trigger on a Mobile Device?

On the Triggers Tab of the Behavior Editor there are options for Mouse Button, Mouse Over and Key Press; but nothing seems to work to enable a touch device to Trigger the Behavior.

Is there a Key Press code that will allow for a Tap on a Touch Device to Trigger a Behavior, or is this just not possible within SS? If this is not possible, it limits all Interactive Behaviors to Non-Touch Devices, and would seem to be something that needs to be addressed, considering the current Mobile dominance of the Internet.

My other Behavior issue has to do with closing my sliding panels. If you go to the Options Tab and click on Device and then Desktop, your browser will be reloaded with the Desktop version. It has 4 of these sliding panels, that all work with a Mouse Click, and they work fine to open each sliding tray. Each tray is set to slide out at a certain speed, and I am happy with that part; but to close the trays, I could not figure out how to get the tray objects to slide back in. The "Reverse directions each cycle" option box does not seem to work as I would expect. Nothing I tried would get the trays to slide back in at a controlled speed; the only thing I could do was to have the Red Chevron Button Reset the path, bringing the tray object back to it's beginning position, hidden under the website.

The closing trays issue isn't really a big deal, they just snap shut instantly and maybe that is better; but the other issue with triggering Behaviors on a Mobile Device, is more of a problem for me. If I can't make that work, I may have to abandon the Ambience Panel on the Mobile pages. The point of making it separate from the other panels was to allow the "Ambience" to continue as a visitor moves about the site; even if it is closed and hidden under the main iFrame. I could use a "sticky" player, but I would rather have my sliding panel if I can.

I'd also like to ask for opinions on what I have done with iFrames, if anyone sees an issue about what I am doing that I haven't thought of, but this isn't really the right forum for that topic. I learned all of this "outside the box" so I tend to create that way too. I know this isn't the way things are done, it is my way and I'm curious what others think Smile Please feel free to PM me with things that are not on topic here in this forum

Thanks in advance, for any solutions, input, advice or critiques that anyone may have.
Original Post
Since mobile devices do not have a mouse, you cannot rely on using "mouse overs" to trigger actions/behaviors. I would use mouse button triggers instead.

If you are using mouse button actions, then make sure that there is no other object covering your chevron images. Any part of another object, even if it seems invisible, will "hide" the object from mouse actions because objects are placed in layers on the page.

If you are concerned with search engine rankings, I would not use i-frames as they are not SEO friendly. For example, in your browser, enter https://finditallemall.com/accessories.html and view the results. As you can see, there is nothing on the page indicating your site. Search engines are going to index all those web pages and will display them in search results. A user clicking one of those search links will be presented a web page without your "brand" showing.

Also, I don't get why you used a page background of a circuit board. How does this relate to an e-mall? I also find the blinking lights distracting.
Thanks for responding larryd.

The invisible square over the chevron has a mouse-over just to display the text label of open or close. The square over the blue chevron also has a behavior to trigger the panel to follow its path, and the square over the red chevron has a behavior to reset the panel path. So the chevron is just an image, the invisible square actually does the work; and there isn't anything over the square to interfere with it, or it wouldn't work with a mouse click, like it does.

I have Mouse Click set as the trigger for the squares, and had just assumed that it would also accept a tap on a touch device; but it doesn't seem to work that way. The Tap causes the Text Title to display, but does not trigger the behavior of the square to then trigger the panel to move. My Tap is registering as a mouse-over instead of a click.

iFrames solved a problem for me in distributing the bulk of this site over several domains, and also 5 different SS .ims files. Without this I would have exceeded the limits for both images and objects within SiteSpinner, for a project. It was becoming too big to work on in SS, and took forever to publish. I'm kind of curious how people break down large sites like this into manageable pieces to work in SS.

Unfortunately what you show is what happens when a frame page is orphaned from the site; this is why there is an explanation at the bottom of each frame page, with a link back to the main site. Not the optimal solution, but I was curious if these orphaned pages would end up acting like referral links; essentially independent advertisement pages for the site. I don't know that it will work out that way, but I'm curious to see what happens.

This does bring up another question though, that maybe you can answer. I had a link to a site, that is unfortunately not there anymore to share with you, but it was on iFrames and they had a sample code that forced a child iFrame to load inside its parent frame first. Meaning, the page link you just shared with me from my site would be forced to open the parent page first and load the requested child frame page within it. They had a example that worked perfectly, with the child page being requested, and the parent being loaded with the requested child page in place. It was a fairly simple script, and I tried it on my site but could not get it to work. As I recall it loaded the parent page, but with its default frame instead of the requested frame page. They never answered my email, so I got no help there.

The site was iframehtml.com but it doesn't seem to be online anymore. I'll have to look around to see if I kept a copy of the code, but does this sound like something that could be done to you? Their example worked perfectly, but my site is a lot more complicated than their example.

The circuit board is only a background on the frame pages, so it only shows as each frame is loading; kind of a "loading" statement in image form. The idea being a "Cyber" shopping experience, hence the mimicking of an electronic device and the flashing lights. I do understand that they are distracting when viewing a frame page by itself, but visitors coming to the main index page will not see this as a background, just a loading image. I guess I thought of it as being a "low cost" way to give the "page loading" impression. I may reconsider this though.

Back to the original question, is it not possible to trigger a SS behavior with a Tap on a touch device? Because I tried it with Mouse Click as a trigger and also with Mouse-Over as a trigger, but neither worked. There is no obvious setting for Tap to trigger, and the only thing left would be some "key code" that could maybe be used to recognize a Tap. I'm sure there is some JS code that would accomplish the same thing with the sliding panel, but I had hoped to be able to keep it simple by using the SS Behaviors.

Anyway, I appreciate the input and any further that you may have, larryd; thanks.
Thanks for the link larryd, I'll give that a try.

On the VM Behavior script, if that is indeed the case, I hope that someone at VM realizes that this means behaviors are not mobile friendly and cannot be used interactively in any site that wants mobile compatibility.

If true, this is a pretty serious bug that needs addressed, or Behaviors as a whole becomes pretty useless for anything other than basic predefined animations, triggered by the timer; and then Actions become pretty useless for anything else as well, without interactive Behaviors to trigger them.

I can't believe that this is a hard thing to fix, but will it get done?

In the mean time I'm just going to remove the problematic part of my mobile version; the Ambience panel. I doubt that many people visiting the site on a mobile device are going to want Ambience anyway; it was thought of more for the desktop and laptop users sitting at home.

Thanks again for your help larryd. I'll post back here if your suggestion for orphaned pages works for me.
larryd,

I tried the script from your page, it forces the parent page, but loads the default child page for the frame instead of the requested child frame.

I don't understand the code well enough yet to know exactly what is happening with it, but it seems to be producing a url for the parent page with the child frame page appended to it like this:

https://finditallemall.com/ind...ml?/accessories.html

but it does not actually load the child page in the frame.

I did leave out one part of the code you suggested, about the frameset:

<frameset rows='...'; onload='setPage();'... >

Because I was not sure it had relevance anymore within HTML5, and I also did not know how to incorporate it into the page; I have no HTML frameset tag on the page to modify, and if I tried the onload statement in a <body> tag it just messed the site up.

It seems to be doing exactly what the other code I tried did; loading the default child page instead of the requested child page. I found part of that code, I believe it is the code for the parent page but I can't remember, just thought you might be interested in this other approach that yielded the same result:

<script type="text/javascript">
var text = window.location.href;
function delineate(str) {
theleft = str.indexOf("=") + 1;
theright = str.indexOf("&");
return(str.substring(theleft, str.length));
}
url=delineate(text)

function refreshFrame() {
if(partsaccautoframe.location!=url&&url!=location.href)
partsaccautoframe.location.replace(url);
}</script>

It appears to me that each of these scripts is essentially doing the same thing, and appending the child target page to the end of the parent page url using ?/child.html

But this does not work for me even if I try it directly in the browser address box. I have seen this used in various examples, but it never seems to work for me, always loading the default child instead of the requested child page. What am I missing? Does this work for others to load the requested child, or does it just load the default frame page?

https://finditallemall.com/ind...ml?/accessories.html

The code is still there on the accessories page you shared above, if you want to try it yourself. Like I said, it works to load the parent url, but the frame on that page loads its default child page.

Any ideas what I am doing wrong, or is this just not going to work?
Here's my code for the parent page:

<script type='text/javascript'>
function setPage() {
if (location.search) {
var mypage = location.search.substring(1,location.search.length);

// Change only the name, 'lowerPage', below to the name of the
// frame where you want to load the orphan page.
emallframe.location = mypage;
}
}
</script>



And my code for the child page:


<script type='text/javascript'>
function loadinFrame() {

// Change the page, 'orphanFrame.html' to the name of your page
// containing the frameset.
var framePage = 'index.html';
if (top.location == self.location) {
window.location = framePage +'?'+ window.location.pathname;
}
}
</script>
<body onload='loadinFrame();' >


In case it helps to see what I am using now.
Update
My mistake was thinking I needed the second set of codes on your page (for framesets); using the first set of code it works fine.

Thanks larryd for the link and setting me on a path to an answer. I'm slowly learning about javascript Smile

For this to really work for my site I'm going to have to nest this effect; I have iFrames nested three layers deep, so I need to repeat this throughout the site, linking each child page to its parent. I'm hoping that it will work; it seems like it should, as long as I give each parent and child page its proper coding.

I'll post my results, in case anyone follows this path of building a site with multiple layered iFrames, and has similar issues.
The answer is yes and no, on the nesting effect.

It works to bring even the bottom level orphaned frame pages back to the main index page of the website, but will not load anything beyond the first level iFrame.

The lowest level child page, when opened in another tab will locate its parent page, which will load properly with the requested frame page; but then that parent page looks for its parent page, and the initial requested child frame page is lost.

It will successfully navigate from the requested child page to its parent, and on up the chain until it gets to the home page, which then loads the appropriate highest level child frame page (Accessories for example, if you tried to open Cosmetics in another tab) but that is as far as it goes because the requested child page of Cosmetics has been lost in the process.

Basically, the iFrames are loading backwards as it moves up the chain to the index page, so the requested frame pages are being overwritten by the next higher level frame as it progresses.

To work, it would need to maintain all child parent connections until it got to the top, and then fill in the iFrames from the top down. This means passing variables through the entire chain of iFrames, to load each page frame in order from the top down to the requested frame page.

I'm not entirely sure that this is even possible; but stacking this code in nested iFrames does work to follow the chain back up to the index page and the top iFrame.

This may not make much sense to many people, unless they are trying to nest iFrames like I am doing; but maybe this helps if they are.

For me, I do not yet have the expertise with javascript to take this any further, but I am satisfied that orphaned frame pages are now forced back to the top to display the full website home page instead of just the requested frame page by itself.

So unless anyone has any insights into how to take this further, I'm going to consider this part of my original question to be answered.

I would still love to hear that there was a fix in the works from VM for the touch triggered behaviors that are not working.
Hey bprokop,

On some of my projects I use scripts from PHP Jabbers. Today I was browsing their scripts and came upon there Yellow Pages directory script and it made me think of your website. It looks like something that could make it easier for you but not sure. You can see it here:

https://www.phpjabbers.com/yellow-pages-script/

Their scripts are easy to incorporate into a website and have a backend.

Add Reply

Likes (0)
×
×
×
×