At the bottom of my page, there are four big square link tabs (called "individual", "group", "child" and "family"). Those tabs work fine on my desktop computer, but for some reason they don't work on iPad.
The strange thing is that when touching them on iPad, the hover effect functions but then nothing happens. What is going on with these links?
Here's the HTML of one of the four tabs:
<a href="https://www.mud-kings.com/events/individual/" id="a_price_li1">
<img src="http://www.mud-kings.com/wp-content/themes/mudkings/images/register_individual.png" id="register_individual" class="register_tab" style="display: block;">
<img src="http://www.mud-kings.com/wp-content/themes/mudkings/images/register_individual2.png" id="register_individual2" class="register_tab" style="display: none;">
</a>
With the following jQuery code attached to it:
jQuery('#a_price_li1').hover(
function () { jQuery('#register_individual').css('display','none'); jQuery('#register_individual2').css('display','block'); },
function () { jQuery('#register_individual').css('display','block'); jQuery('#register_individual2').css('display','none'); }
);
#drake035, I managed to find some similar questions (with answers) asked by other people with more or less the same problem. My suggestion would be take a look and see if the information provided in there solves your problem (since I have some doubts I will ask you bellow).
iPad hover/click issue
hover effect on a tablet (i.e. iPad)?
In order to be aware of the current situation, what kind of knowledge in web programming do you have?
What makes you think there is the problem only?
Greetings, Martin
Related
I have a jquery UI dialog on my page thusly:
$(function() {
$("#dialogDone").dialog({
closeOnEscape: true,
modal: true,
width: 350,
autoResize:true,
show: "drop",
hide: "drop",
autoOpen: false
});
});
<div id="dialogDone" title="Activity Done?" class="RNDDialog">
<div style="text-align: left;">
You are about to stamp this activity as DONE. Notifications may be sent out, and only Project Admins can reverse this.
<br><br>
<input type="checkbox" id="chkKeepShowingDoneWarning" class="RNDCheckbox" checked>Keep showing me this
</div>
<br><br>
<center>
<button class="GreenButton" onclick="stampActivityDone()">Yes, it is DONE</button>
<button class="GrayButton" style="margin-left: 10px" onclick="cancelDone()">Cancel</button>
</center>
</div>
After launching the dialog, nothing inside it is clickable. The grayish layer that normally covers the whole screen (but not the dialog normally) and makes everything in the background disabled, is also for some reason covering the dialog itself. I cannot click either button, nor check/uncheck the checkbox.
You can see it for yourself here.
I created the test page in the link above as a bare-bones reproducible minimal example. I have used jquery dialogs many times in this web app and others, but for some reason on this particular page, I get this strange behavior and cannot figure it out.
After launching the dialog, even though everything on the page including the dialog contents is disabled, you can still hit ESC, which dismisses the dialog and makes the page accessible again. This tells me that the fundamental jquery UI dialog wiring and event model is still working.
I read this other post that suggested setting the z-index of the dialog, so I experimented with that but it did nothing.
Any ideas?
I ran an HTML formatter on your test page source code and it looks like you have a lot of unclosed tags. Some of those unclosed tags are likely causing elements to have parents that you don't expect. I would recommend very carefully reading your code and making sure that every opening tag has a matching closing tag at the position you expect.
I found the problem. I was referencing an older jquery UI css file (1.9.1) instead of the newer one that goes with jquery 1.12.1. This is an edge case admittedly, but maybe it will help someone in the future who references an incorrect jquery UI css file.
First time post on StackOverFlow.com, a shame as I am considered to be a computer science student. First and foremost, thank you all so much for the help you have already provided me via other's inquiry answering my own questions. Today I have my own real question which like this post's title may be hard to understand. I however like a challenge.
</introduction>
ABSTRACT: Using the content of the website somethingmedia.co on the artist / philosophy pages; create a more user friendly display with special consideration of mobile devices.
METHOD: Alter blocked 'div' content to be virtually inline and allow side scrolling. Please visit here for a clear representation to [demo] and see below for explanation[a]
ALTERATION: While allowing for touch and hold sensitivity options as seen in [method] also allow the scrolling to occur with a mouse wheel. Please see [demo2] and visit explanation[b] below.
FUNCTIONALITY: In addition to the [method] and [alteration], allow scrolling to also occur upon users' movement of the pages scroll bar itself. Except (and here is the tricky part), make the scroll bar vertical, yet only move the content left and right. Scroll bar only visible on non mobile devices (i.e. PC / Laptops / Macintosh / etc).
CONCLUSION: I like making websites and though I have never taken a formal class for websites (since the 6th grade) I continue to learn new things based on what I find unique and interesting. Therefore, I am curious to know if there is a way to implement this design in a simple and elegant fashion. Though my computer science experience is limited to Java and Python in school, I have independent experience in CSS, HTML, Java Script and a bit of CGI. If you're up for the challenge with me I ask you: "What is my first step?"
</concept>
explanation[a]: code.comunicatek.com/en/tekslider_a_touch_focused_slider.html
explanation[b]: css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
The question's a little confusing, but assuming what you really mean is, "How can I have a page that uses vertical scroll bars to scroll the page horizontally," I'd try something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertizontal Scrolling</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function() {
$('#page-scroll').height($('#page-wrap').outerWidth());
$(window).scroll(function() {
$('#page-wrap').css('left',-1 * $(window).scrollTop());
});
});
</script>
<style type="text/css" style="display: none !important;">
#page-wrap {
position:fixed;
left:0;
top:0;
z-index:10;
}
#page-scroll {
z-index:1;
}
</style>
</head>
<body>
<div id="page-scroll">
<!--- intentionally empty --->
</div>
<div id="page-wrap">
<!--- really wide content goes here --->
</div>
</body>
</html>
I have faced the problem, i'm using jquery-mobile and onClick function in tags.
<a id="stopper" href="javascript:void(0);" onclick="stop(); return false;" data-rel="back">back</a>
Here is the code, i'm using.
Thing i want to get working is video player. without this, the video keep going even if i change the page.
I have tried many scripts and tricks to get it work, and searched almost all of the forums in here. But still i'm fighting with this.
It works just like i want in pc and android tablet (samsung galaxy tab2) but not in ipad.
Thanks!
instead of hard coding the onclick="stop(); as this. You should bind the click event
Something like this
$("#stopper").on("click", function(){
// your code to stop
});
Those do not work on the iPad, insert the rel = "external" and href = "edellinensivu.asp" That works, at least I.
At first If something similiar to this already has been asked, I am sorry, but that is my first question here and i didn't find anything that could had helped.
Since i dont know if it's important, my doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="container"> /* container i which everything is nested */
<div id="header">
</div>
<div id="Navigation">
<a onmouseover="Bildwechsel('Galerie','HGalerie.png');"onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> //one of the links which is causing trouble
</div>
<div id="content"></div>
</div>
and that is the mouseover function (hope you don't mind the names, i'm German):
function Bildwechsel(Bild, BildSource) {
document.images[Bild].src = BildSource; /* function i use to change pictures on mouseover */
}
In my header, i have also included two versions of jQuery (that is because a plugin needs an older version to work properly) and lightbox v2. I have implemented them with var something=jQuery.noConflict();, also inserting true in one of these declarations because otherwise it wouldn't work but since everything works fine, I think there shouldn't be a problem.
My problem know is that when i click the link with href="Galerie.htm" every browser I mentioned at the beginning excluding opera (I am using version 11.62) is navigating to Galerie.htm. But in Opera it's like the Browser's only refreshing the site, so he always stays on the same page no matter what link i click. Maybe good to know: When i right-click on the link and open it in a new tab, everything works fine.
And the second question is: Although i know what doctypes are good for, how do i know which one is best to use in my case? i already did check my html markup, getting about 50 results(?) with errors like :link rel="stylesheet" type="text/css" src="something.css" > missing slash between [...] .css" and >, but when i look it up in selfhtml it's written that way. I know that i depends on the doctype if the slash is needed or not ,but do i have to look every single slash up or is it not that important? If yes how can i achieve a valid html with 0 errors?
Since I always thought a (anchor?) links are the last thing i will have problems with I have really no clue whats going on here.
Any help would be appreciated ;)
without firing up Opera and playing with all this myself.. first, in that link you need a space between your onmouseover and onmouseout attributes.
e.g.
<a onmouseover="Bildwechsel('Galerie','HGalerie.png'); "onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> <!-- btw, "//" starts a javascript comment, but not so in HTML. //one of the links which is causing trouble -->
Does that help?
I created a website that works quite nice but later went over to a friend's house and the website was disproportioned and almost hideous on his widescreen monitor. Without extensive rewriting of the website, is there perhaps a script that resizes my website for those on widescreen monitors, or other alternatives? Any suggestions besides "redo your website properly" welcome. Thanks!
EDIT:
Here is how my website should look like:
http://img843.imageshack.us/img843/4453/22425853.jpg
Here's how it appears on widescreen:
http://img851.imageshack.us/img851/7494/racism.jpg
It depends on how you did the layout. If you did not use absolute or fixed positiong, the simplest way could be to use a wrapper div around your content and give it a maximum width, like this
<body>
<div id="wrapper">
<!-- all the content goes here -->
</div>
</body>
and the CSS
#wrapper {
max-width: 960px;
margin: 0 auto
}
EDIT: If you do not have access to the HTML you can leave the CSS as shown and use this jQuery line (it should work but I have not tested it)
$('body').wrapInner('<div id="wrapper" />')
EDIT: I see you are not familiar with jQuery. Code that should be run only when the page is ready should be wrapped as follows:
$(function() {
$('body').wrapInner('<div id="wrapper" />');
});
Please let me know if that works for you. You can try
$('#wrapper').attr('id');
in the Firebug console to check that the wrapper div has been created.
Set a max-width in your css on the wrapper of the site.