HI
In my project I have a Popup image .
When the user clicks on the left part of the image it will redirect the user
to page1.aspx. When the user clicks on the right part of the image
it will redirect the user to page2.aspx. I used JQuery for this and it works
fine in Fire fox. But it doesn't work in IE.
What could be the reason,. Any help will be appreciated.
Thanks
Here is the code
<script type="text/javascript">
swfobject.registerObject("inhalerVideo", "9.0.0", "expressInstall.swf");
/* jQuery Nonsense */
$(document).ready(function()
{
//!\: Slider nav thingy.
$("#link_one").click(function()
{
var aWidth = $(this).width();
if($(this).hasClass("closed"))
{
$(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
if($("#link_two").hasClass("open"))
{
var bWidth = $("#link_two").width();
$("#link_two").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
$("#link_two a").hide();
}
$("a", this).show();
}
else
{
$("a", this).hide();
$(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
}
});
$("#link_two").click(function()
{
var aWidth = $(this).width();
if($(this).hasClass("closed"))
{
$(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
if($("#link_one").hasClass("open"))
{
var bWidth = $("#link_one").width();
$("#link_one").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
$("#link_one a").hide();
}
$("a", this).show();
}
else
{
$("a", this).hide();
$(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
}
});
//!\: This could all be achieved with CSS.
$(".subnavonfirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavon").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavonlast").prev(".subnavoff").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavonlast").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
});
</script>
<!-- Main Content Container -->
<div id="mainContentContainer">
<!-- Top Link Slider -->
<div id="headerContainer" class="printHide">
<div id="headerLinkContainer">
<div id="banner_container">
<div id="link_one" class="sub closed">
<img class="major" src="images/patient_info.gif" border="0" />
<img class="minor" src="images/sub_nav.gif" border="0" />
<!-- -->
<!-- -->
</div>
<div id="link_two" class="sub closed">
<img class="major" src="images/prescribe_info.gif" border="0" />
<img class="minor" src="images/sub_nav.gif" border="0" />
<!-- -->
<!-- -->
</div>
<div id="link_three" class="open"><img src="images/isi.gif" border="0" /></div>
</div>
</div>
</div>
Have you tried using an imagemap? That way it's supported by almost all browsers, including IE.
You can also capture the click() event of the <area> tag if you wish.
EDIT: Upon looking at your site, perhaps you could bind the expanding div functionality to the image .major rather than to the .sub div.
It looks like the .sub div is intercepting the click event on IE, but standards-compliant browsers understand that the .minor picture should be rendered 'above' the .sub div.
Related
I am stuck on how I can write a script in JS so when the user clicks on a image it transitions/ turns into text.
I have a divs in a div as i have to use that for a scrolling animation. So when the user scrolls to the icon in which they want to they can click it and it would turn into text, like when i click the job icon it shows the jobs listed.
I tried to use ".innerHTML = "Hello World"" though that had failed.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Underscores</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/jquery-
slotmachine#4.0.0/dist/jquery.slotmachine.min.css"></style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div id= "left" class="left">
<img src="https://s3.amazonaws.com/underscores.xyz/images/left.png" alt="">
</div>
<div class="middle" id = "theMiddle" style="width: 400px; height: 300px">
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png"
alt="" class="about" id="aboutID"></div>
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt=""
></div>
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png"
alt=""></div>
</div>
<div id= "right" class="right">
<img src="https://s3.amazonaws.com/underscores.xyz/images/right.png"
alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery-
slotmachine#4.0.0/dist/slotmachine.min.js"></script>
<script src="back.js" charset="utf-8"></script>
</body>
</html>
JS:
document.body.style.overflow = "hidden";
//the key strokes for the up and down keys
// Set up our container
const el = document.querySelector("#theMiddle");
// Create new SlotMachine
const slot = new SlotMachine(el, {});
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
//Secret Code: EADWEARD
anime({
targets: "div.right",
translateX: {
value: 200,
duration: 500
}
});
anime({
targets: "div.left",
translateX: {
value: -200,
duration: 500
}
});
if (e.keyCode == "40") {
//this is down
//this will open it up
slot.prev();
} else if (e.keyCode == "38") {
slot.next();
}
}
//Scroll detection occurs here, without the scrollbar
$("html").on("mousewheel", function(e) {
anime({
targets: "div.right",
translateX: {
value: 200,
duration: 500
}
});
anime({
targets: "div.left",
translateX: {
value: -200,
duration: 500
}
});
var delta = e.originalEvent.wheelDelta;
if (delta < 0) {
//This is for the scrolling down
// animation opens up the brakets
slot.prev();
}if (delta > 0) {
slot.next();
}
});
//this is for detecting clicks for the divs in the middle div
// 1 = the 2nd image , 2 = the 3rd image
$(".middle div").click(function(){
if($(this).index() == '1'){
// The change occurs here
console.log("the fucks");
document.getElementById("aboutID").innerHTML = "Hello World";
}if($(this).index() == '2'){
// The change occurs here
console.log("jobs page");
}
});
innerHTML is the property of HTML element, which can be used to get the content within the specified id of the DOM. So, if we want to change image then apply the same on div tag.
Give id to div tag which contains image to be changed.
<div id="changetotext"><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png" alt="" class="about" id="aboutID"></div>
In js change the id to id of div tag.
document.getElementById("changetotext").innerHTML = "<p>Hello World</p>";
Hope this helps!
I'm integrating a search suggest function in a oscommerce script. The function is working properly, but I need to create a div hide onclick and shown on input click using Jquery (with animation speed) since when i start typing the div appears but cannot be hidden (I have to refresh the web page to remove the search suggest div)
The events will be created under this div:
<div id="smartsuggest"></div>
Here is my code:
$data = '<div class="search">'."\n".
tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get', 'id="frmSearch"')."\n".// ' <label class="fl_left">'.MODULE_BOXES_SEARCH_HEADER_BOX_TITLE.': </label>' ."\n".
' '.tep_draw_button_search_top().tep_draw_button(MODULE_BOXES_SEARCH_HEADER_BOX_TITLE).tep_draw_button_search_bottom()."\n".
' <div class="input-width">'."\n".
' <div class="width-setter">'."\n".
tep_draw_input_field('keywords', MODULE_BOXES_SEARCH_HEADER_BOX_INPUT, 'id="txtSearch" onkeyup="searchSuggest(event);" autocomplete="off" size="10" maxlength="300" class="go fl_left" onblur="if(this.value==\'\') this.value=\''.MODULE_BOXES_SEARCH_HEADER_BOX_INPUT.'\'" onfocus="if(this.value ==\''.MODULE_BOXES_SEARCH_HEADER_BOX_INPUT.'\' ) this.value=\'\'"').''.tep_hide_session_id()."\n".
' </div>'."\n".
' <div id="smartsuggest" ></div> '.
' </div>'."\n".'</form>'."\n".
'</div>
<script type="text/javascript">
$(function(){
var mq = window.matchMedia( "(max-width: 480px)" );
if((mq.matches)) {
$(".input-width").click(function() {
$(this).animate({right: "0", width: "125px"}, 500);
});
$(".input-width input").blur(function(){
$(this).parent().parent().animate({right: "0", width: "125px"}, 500);
});
}else{
$(".input-width").click(function() {
$(this).animate({right: "0", width: "360px"}, 500);
});
$(".input-width input").blur(function(){
$(this).parent().parent().animate({right: "0", width: "190px"}, 500);
});
}
});
</script>
'."\n";
// MOD: BOF - SmartSuggest
if (SMARTSUGGEST_ENABLED != 'false') {
require(DIR_WS_CLASSES.'smartsuggest.php');
$smartsuggest = new smartsuggest();
$smartsuggest->output($data);
}
// MOD: EOF - SmartSuggest
By using Jquery hide() and show() methods you can do this..Try ...)
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
I have a little script that is creating a parallax effect. Therefore I created a data attribute with the speed velocity and a data-type to select the parallax elements. At the very same time, one of the elements fades out when scrolling down.
The script works fine, but unfortunately, when scrolling to the bottom of the site (and "overscroll" it), the site jitters like hell. It seems to be the part with the yPos and scrollTop method.
Do you have any ideas what the problem is?
Here's the markup:
<section class="slider">
<img src="images/hafen.jpg" class="slide" data-type="parallax" data-speed="3">
<div class="claim" data-type="parallax" data-speed="6">
<h1>SOME TEXT</h1>
</div>
<div class="arrow-down" data-type="parallax" data-speed="3">
<img src="images/arrow-down.png" alt="">
</div>
</section>
<section class="content" data-type="parallax" data-speed="1">
<div class="wrapper">
<img src="images/content.png" alt="">
</div>
<section>
That's my script:
$(window).scroll(function() {
var box;
$("[data-type=\"parallax\"]").each(function() {
var $bgobj, position, yPos;
$bgobj = $(this);
yPos = -($window.scrollTop() / $bgobj.data("speed"));
position = parseInt(yPos);
return $bgobj.css({
marginTop: position
});
});
box = $(".claim");
return box.css({
"opacity": 1 - $window.scrollTop() / 400
});
});
Seems like you are missing ( and ) around window here:
yPos = -($window.scrollTop() / $bgobj.data("speed"));
Should be:
yPos = -($(window).scrollTop() / $bgobj.data("speed"));
And you <section> isn't closed at the very end. Should be:
...
</section>
Not sure what your expected result should look like with proper CSS, but this seems to be working with the above changes:
http://jsfiddle.net/4Zmh8/
$(function () {
$(window).scroll(function () {
var box;
$("[data-type=\"parallax\"]").each(function () {
var $bgobj, position, yPos;
$bgobj = $(this);
yPos = -($(window).scrollTop() / $bgobj.data("speed"));
position = parseInt(yPos);
return $bgobj.css({
marginTop: position
});
});
box = $(".claim");
return box.css({
"opacity": 1 - $window.scrollTop() / 400
});
});
});
I am using an external library - SwipeJS - for a touch picture slide, and it is only working when I resize my browser window.
I have my images in the Swipe Container like this inside the body:
<div id='mySwipe' style='max-width: 500px; margin: 0 auto' class='swipe'>
<div class='swipe-wrap'>
<div>
<img src="css/images/image4.jpg" width="100%" />
</div>
<div>
<img src="css/images/image2.jpg" width="100%" />
</div>
<div>
<img src="css/images/image3.jpg" width="100%" />
</div>
</div>
</div>
And, I am loading the swipe script right at the end of the body to make sure the document is ready - as the library author suggested. The library is loaded inside the <head> container.
<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide : 1,
auto : 3000,
continuous : true
});
</script>
I have tried to check if the document is ready with $(document).ready(function() { } but that solution did not work either.
Have you tried using the widgets default example with just your minor tweaks specifically?
<script>
var slider = Swipe( document.getElementById('mySwipe'), {
startSlide: 1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
} );
</script>
I am using domtab on my site . ( between 'TOUS LES FILMS' and 'AFFICHAGE HORAIRE' )
However the height is not automatically set, that is why I am trying to use jquery to modify it each time I click to them.
Here is the HTML structure of the tab
<div id="domtab1" class="domtab">
<ul class="domtabs">
<li><a id="fl1A" href="#t1">TOUS LES FILMS</a></li>
<li><a id="fl1B" href="#t2">AFFICHAGE HORAIRE</a></li>
</ul>
<div class="flip1A" id="fli1A">
<h2><a name="t1" id="t1"></a></h2>
<ol class="rounded-list">
<li>Spiderman</li>
<li>Pokemon</li>
<li>X men</li>
<li>Blanche Neige</li>
</ol>
<p>back to menu</p>
</div>
<div id="fli1B" class="flip1B" >
<h2><a name="t2" id="t2"></a></h2>
<div class="heading2">
<hr class="gradient_one" />
<p class="hours_gradient">12h10</p>
</div>
<ol class="rounded-list">
<li>Spiderman</li>
<li>Pokemon</li>
</ol>
...
<p>back to menu</p>
</div>
</div>
And here are the jquery code I tried but none worked:
$('#fl1B').on("click", function (e) {
var maxHeight2 = document.getElementById("fli1B").scrollHeight;
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
});
});
$("#fl1B").click(function () {
var maxHeight2 = document.getElementById("fli1B").scrollHeight;
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
});
});
$('#fl1B').live('click', function () {
var maxHeight2 = document.getElementById("fli1B").scrollHeight;
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
});
});
Your handlers work fine, actually all of them is correct.
I've tried the first one:
$('#fl1B').on("click", function (e) {
var maxHeight2 = document.getElementById("fli1B").scrollHeight;
console.log("New height: " + maxHeight2);
$("#text_var").html(maxHeight2);
$("#flip-tabs").css({
'height': maxHeight2 + 'px'
});
});
There is no element with id flip-tabs in your html, so I cannot tell more about the issue. If this is not the issue itself :)
I've added a div with this ID, so you can see that the css call is working too: Check here: http://jsfiddle.net/balintbako/9WYpL/
I'm assigning the handler in the $(document).ready() block, which can be difference in your code.