On my page I'm currently doing something like this: http://jsfiddle.net/FBCSt/6/ I really don't know why, but in Chrome I got some strange issues with that - sometimes the contents of the div elements are not loaded correctly. In IE, Safari and Firefox it work fine, but as I said, in Chrome it is causing some trouble.
That's why I want to know, if there is a more sleek way to do this? (There are three buttons, every one is assigned to one div. Only one div should be visible)
I am thankful for every answer =)
EDIT: Thanks everybody. This is the solution. It works well =)
"a better way: jsfiddle.net/FBCSt/13 – #Mohammed ElSayed 20 mins ago"
Try this: http://jsfiddle.net/FBCSt/10/
In IE, Safari and Firefox it work fine, but as I said, in Chrome it is
causing some trouble.
I really don't see an issues when testing under Google Chrome 19.0.1084. But in any case,
That's why I want to know, if there is a more sleek way to do this?
Yep, there is. Since one of your tags is jQuery, I suggest you take a look at jQuery UI's tabs.
Why don't you use show() instead of toggle()? Maybe the issue is related to using toggle(). And you can combine the elements to be hidden: For example,
$('#page2,#page3').hide();
$('#page1').show();
Or as nicely put by Mohammad,
$('#page1').show().siblings().hide();
I have working solution on this url : pastebin it works in chrome and also in FF.also it will work even if you add 1000 id with page#100 but still it will not have too much code. thanks.
Like Abody97 said: try JQuery UI tabs
If you're looking for a "more sleek" way of doing this, try this fiddle: http://jsfiddle.net/NCbW6/
It doesn't bother with specific ids for each element so you can add as many as you'd like without changing the JS.
Related
It's a little hard to describe as I have very little knowledge about Javascript, but it seems to be causing some issues with my Chrome browser. The best way I can say it is that a lot of things that use Javascript are broken. For example, when I visit a Wikipedia page and try to click 'show' on a nav-box, it takes me to the top of the page instead of opening the box. These things still work on IE, so I know this issue at least limited to Chrome. I don't know how this issue started. What exactly is going on here, and how can I fix it?
It's been resolved. I did a full reinstallation of Chrome.
Is there ANY way to click a JavaScript link using the Watir webdriver? I've looked around for hours and nothing has helped me.
Here's what the link looks like: MULTIPLY YOUR BTC
I've tried using browser.link(:id, "double_your_btc_link2").click and a bunch of other stuff including Xpath (it kept saying it couldn't follow the path) and nothing works. Is it even possible?
If you need the page, here it is.
That should have been:
browser.link(:id => "double_your_btc_link2").click
Sorry to waste your time, guys. I just used Firefox instead of Chrome and it worked fine. This isn't even the first time I've had a problem with accessing JavaScript elements in Chrome...thanks anyway.
I'm new to javascript and I can't seem to figure out this thing which I reckon should be a no-brainer.
I'm using Jquery mobile. I would like to clone a div and update the IDs of the elements in it. This seems to work fine. However, I can't get the cloned select element to work properly. I doesn't seem to work - I can't select anything - after its been cloned. When I call an extra $('html').trigger('create'); on the page the select elements starts looking 'funny' (probably because it got enhanced a second time) but does works.
I've posted a simplified version of my code here: http://jsfiddle.net/cUBPF/1/
Does anyone have a suggestion for me?
Thanks!
I'm not experiencing any problems however I'm just using my desktop. My first thought is to avoid calling the $('html').trigger('create'); at all and simply do what you want to within the clone_button click but then again, I'm not really sure what you are doing.
Instead of doing all this, why not output 10 or 20 of these fields and the display:none/display:block them......I assume you will run into less compability issues this way and you really don't want to allow infinite amount of fields....your going to run into browser memory issues which is just going to cause more bugs.
I created a page using Dreamweaver and fireworks that uses one AP Div as a button to show and hide two other AP Divs using JavaScript. However, the AP divs are relatively places. It all works fine in google chrome and safari but it doesn't work at all in IE 9. I suspect it's an issue with the JavaScript and IE9. I am new to this, and I know my site is built in a weird way. All help is appreciated.
I also tried using this tutorial:
http://webdesign.about.com/od/dhtml/a/aa101507.htm (Shows and Hides divs with a link)
where the a div is a link, to make it work, but it didn't fix it.
Thanks in Advance
Right, I've scrapped your code, not because it's bad but because I dont understand it :P, I've used something different, this may mean that you have to re-write some code on your page. What my code does it replaces the content with-in the div instead of hiding/showing between 2 divs... Below is a link to a jsfiddle, try running it in IE9 and see if that works.
http://jsfiddle.net/hSMk3/
If it doesn't work tell me in the comment section thingy below :)
I'm trying to make a checkbox check when I click not only the checkbox, but also the container it's in. The problem I faced is that when I checked a checkbox, it fired it twice because it was also clicking the container. I've come up with the following solution that seems to work fine, but I have a feeling there's a simpler way to do this and I'm looking to learn to really why short and compact javascript, so any advice would be helpful :)
http://jsfiddle.net/masedesign/8q5TQ/
$(function(){
$('td.cell input').click(function(e){
e.stopPropagation();
});
$('td.cell').click(function(){
$(this).find('input').click();
});
});
The e.stopPropagation() method prevents the event from bubbling.
just for fun I tried to achieve the same effect without javascript: if you're interested in a pure CSS solution working only on newer browser (it relies on :checked pseudoclasses) look at this fiddle: http://jsfiddle.net/g6Sx7/2/ (but if you're interested I can improve it with a js fallback for old IE)
Edit: a fiddle with js fallback: http://jsfiddle.net/g6Sx7/7/ this code should work fine also on IE6 but here the problem is about CSS support (the adjacent sibling operator + is not supported on IE6) : the whole effect won't work there, but anyway you cannot have a box shadow in that browser... so I think it's not a great problem.
If you are not performing any other task when the checkbox is checked i.e. the js that you have written is just for the sake of making the box clickable then i would suggest to take a CSS approach rather then JS.
here's a working example http://jsfiddle.net/8q5TQ/6/
Note: this works in IE7/8/9 FF (latest installed in my machine) and Chrome (latest installed in my machine)
Update: (after reading ur comment) i don't have IE 6 (sorry) but tried in quirk's mode and is working fine. Hope this helps :)