I have a very basic slider on my homepage, but for some reason it stopped working in IE7, 8 and 9. I have no problems in all other browsers tested.
Here is a link to the JavaScript file I am using:
http://pastebin.com/xw3MpvCA
The relevent code for this slider is on the top of the file.
the website in question:
http://shawn.theanointedone.com
The slider in question is the small one with the black background right beneath my primary slider. It simply scrolls through a number of photo's that take a user to a specified Wordpress slideshow post.
Keep in mind that I am brand new to JavaScript, and doing my absolute best to get it right. I did run the script through jsLint, and it seems to come back fine.
Is there a rather basic rule that I have broken somewhere that only applies to IE?
Thanks so much for everyone's help. I'm actually having a great time and loving JavaScript the more I learn about it.
I have discovered what the issue is. Its with the disableCustomButtons(carousel) function in scripts.js from line 25 to line 40. What happens is that when the document loads the visible arrow on the left has an id of #mycarousel-next with a disabled attribute set to false while the invisible arrow on the right with id of #mycarousel-prev has 'disabled' set to true.
In IE both arrows have disabled set to 'false', which should not be so, that is why you are experiencing this problem and its from the disableCustomButtons function from line 25 to 40:
Thank you everyone for the advice!
The only thing I was unsure of is 'Yi Jiang' mentioned that my code could be shortened a lot, but gave no examples of how to do so.
Any ideas on this?
Related
I want to create a bookmarklet that I can drop on my browser's bookmark toolbar which, when clicked, inserts a fixed, predefined text (in my use case, a shruggie: ¯\_(ツ)_/¯ ) at the current cursor position (assuming that the cursor is in an editable input field or textarea). However, I am a beginner at JavaScript, and can't figure out how to get started doing this. Any help? If I can get a pointer in the right direction, I can probably figure it out from there. Thanks!
Apologies for the delay; life threw a few curveballs at me right about the time I posted the question, and I forgot about this until StackOverflow notified me of the responses tonight.
The comment by afuous gave me everything I was looking for, and I now have a working bookmarklet. For anyone else who comes across this, here it is:
javascript:(function(a){a.value=a.value.slice(0,a.selectionStart)+"%C2%AF\\_(%E3%83%84)_/%C2%AF"+a.value.slice(a.selectionEnd);})(document.activeElement);
Or, as JavaScript that hasn't been converted to bookmarklet form:
(function (a) {
a.value =
a.value.slice(0, a.selectionStart) +
"¯\\_(ツ)_/¯" +
a.value.slice(a.selectionEnd);
})(document.activeElement);
This has the benefit of allowing for me to select a portion of a text and use the bookmarklet to replace the selection with a shruggie, as if I had hit a hypothetical shruggie key on the keyboard.
Feel free to steal and modify as you see fit. This has been tested only in Firefox 50.0.2, but I think it should work in all modern browsers. (It won't work in Internet Explorer 8 or earlier.)
CSS Tricks has an article that explains how to do that and more. I'm well aware link only answers are less than ideal here, however the question is asking for pointers in the right direction, so I believe its a good fit.
The bookmarklet from the tutorial prefills forms, so essentially you are going to want to gut it, but first peek into how it is finding form controls and prefilling them. Then tweak to fit your desired functionality, and finally rip everything else out that you do not need or use.
Prefilling Forms Custom Bookmarklet
Folks -
Longtime lurker, first time poster. I've found many answers here in the past, and have always appreciated the expertise. I'm a bit of a noob, so bear with me:
I have a landing page. It displays well in Chrome, Firefox, Safari, and older versions of IE. All of the above include the the Google ReCaptcha - no issues, widgets work, etc.
IE 11 turns this to mush. My graphic fails to load, and it seems the recaptcha moves itself to the full width of the page instead of the small part I've intended.
Oddly enough, if I grab the sides of the browser window and adjust the width in any way (wider or narrower) the image snaps in where it should be, and the page looks perfect. Likewise, if I inspect the element, the page loads exactly as intended.
This seems like it should mean something to me, but my knowledge is too limited to get exactly what I'm being told. Can anyone shed some light on this for me?
I can furnish source code and screenshots if that's required.
Regards, Cheers, and thanks for any thoughts -
CDM
#Romulo helped me tremendously with this issue. The entire page was being loaded by a script, and there were errors within the script itself that needed correcting. The solution required a style block to be moved, which solved the issue. This was probably a once-in-a-lifetime issue, but if you find this page and think this might be what you're dealing with, feel free to message me and I'll be happy to discuss further.
It's a little bit difficult to ask a question, because I'm using mainly templated code for the outlooks of the (personnal) website I'm conceiving.
It's a template using html5/css3 and javascript (which doesn't seem to take a part in the issue I'm having).
So here it is : in firefox and explorer, the footer displays at the bottom of the screen even when the content of the page does not go that far. But in chrome, for a reason I do not grasp, the footer displays right under the content stop, leading to an ugly blank space from the end of the page to the end of the screen. Does anyone have an idea why?
I know it's difficult to answer without code, but since I only half grasp what's happening I can't really provide more information.
Thanks in advance!
Edit : https://jsbin.com/hozudepimi/1/edit?html,output
Added a bit of code if it can help
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
I have the Jquery Cycle Plugin ... http://jquery.malsup.com/cycle/ ... and I'm trying to figure out how these guys: http://www.flosee.co.uk/ did this.
On their website, and I don't know how to put this into words, but the slider they have going from right-to-left, and if you're display settings are at 1024 x 768, you won't notice anything. But if they're bigger, like 1280 x 768, or 1920 x 1080, you'll notice that the Jquery slider goes outside the page view, into the edges. Does this make sense?
I'd like to know how they did this. Is it just adjusting the Jquery, or a .css adjustment? With my lack of programming knowledge, I'm just surprised I even installed this successfully, so any clear feedback or advice in this regard would be truly appreciated.
Thanks!
Jason Weber
I'm Tony, the owner of flosee :) Glad you like our slider effect, its actually done using three iterations of the slider which are then positioned using css with an opacity overlay. The hardest part was making sure the iterations started one apart so that it gives the impression of being one continuous slideshow across the screen. As a programmer, its not the most elegant of solutions, but it works and I need to get it in place quickly. IF you would like help setting yours up, feel free to send me a message using the contact form on our website.