safari jquery hide not working

JS/JQuery error messages didn't hide in Safari using .show() and .hide

I’m really stuck here, maybe someone will be my savior. I have some validation in JQuery (this is a Rails app) where I validate field for equals two email address, phone number and gender. If I click submit, leaving fields empty, I received an error required field but after filling in these fields, error don’t hide. The problem only occurs in the Safari browser, in Chrome everything is perfect.

I thought the Safari cannot handle with .hide() and .show() methods so I was trying to replace this by adding some additional css class and use addClass and removeClass without any positive results. Any ideas?

Bug Tracker

Side navigation, #2233 closed bug (duplicate).

Opened January 24, 2008 07:50PM UTC

Closed December 19, 2008 06:12PM UTC

Last modified March 15, 2012 10:14AM UTC

.hide() on a new element does not work in safari

Description.

Adding a new hidden element to the DOM using .append() does not work as expected in Safari 3

$('body').append( $('<div>').text('hi').hide() )

will insert a new div which is not hidden. This is only with Safari 3, FF and IE work fine.

The following alternative does work in Safari:

$('body').append( $('<div style="display:none;">').text('hi') )

Changed January 24, 2008 08:04PM UTC by tmm1 comment:1

This is due to the :visible selector being broken in Safari when an element is not part of the DOM yet.

Changed January 24, 2008 10:04PM UTC by davidserduke comment:2

This should work too:

$('body').append( $('<div/>').text('hi').css('display', 'none') )

Changed January 25, 2008 07:59PM UTC by bmsterling comment:3

This works:

$('<div>').appendTo('body').hide().text('hi');

Changed March 20, 2008 04:23PM UTC by emartin24 comment:4

Is there a fix that can be applied to jQuery for this, or is it just up to the developer to know about it and use a workaround?

If I do a append, then hide, there is the potential of a visible 'flicker' since the element will be displayed, then hidden.

Otherwise, as mentioned above, adding a direct css of display: 'none' will work and avoid the possible 'flicker'.

The third option being a way for jQuery to handle it so that we are abstracted from this Safari issue. This would be ideal since it would make hide() consistent across all browsers.

Changed March 20, 2008 04:49PM UTC by emartin24 comment:5

It looks like the failure is happening on:

jQuery.css(a,"display")!="none"

which is returning false.

What about something as simple as adding a browser sniff (for lack of a better idea ;) ):

($.browser.safari||jQuery.css(a,"display")!="none")

selector.js:

• visible: function(a){return "hidden"!=a.type&&jQuery.css(a,"display")!="none"&&jQuery.css(a,"visibility")!="hidden";},

+ visible: function(a){return "hidden"!=a.type&&($.browser.safari||jQuery.css(a,"display")!="none")&&jQuery.css(a,"visibility")!="hidden";},

Changed March 20, 2008 09:38PM UTC by emartin24 comment:6

Well, I've been looking at it more and it looks like the issue comes from core.js (891-906):

I haven't gone through it yet to see if a fix is possible, but it seems to be where the root of the issue comes from.

Changed September 19, 2008 12:12AM UTC by codeword comment:7

I am having this problem as well.

We are using closures in an object mother to build out our html for testing and it is not possible to wait until the elements are attached the dom before manipulating them.

I can use the '<div style="display:none;">' approach however.

Changed December 19, 2008 06:12PM UTC by john comment:8

Duplicate of #1239 .

Javascript example 2

Javascript example 3, javascript example 4, javascript example 5, javascript example 6, javascript example 7, javascript example 8, javascript example 9, javascript find, javascript first, javascript focus, javascript font, javascript group, javascript height, javascript hide content, javascript hide data, javascript hide example 1, javascript hide example 2, javascript hide link, javascript hide show, javascript hide toggle, javascript hide value, javascript html, javascript id, javascript id value, javascript index, javascript inline, javascript inner, javascript inner div, javascript inner html, javascript inner text, javascript insert, javascript inside, javascript list, javascript loop, javascript move, javascript multiple, javascript next, jquery show/hide in safari, introduction.

The following tutorial shows you how to do "jQuery Show/Hide in safari".

The result is illustrated in the iframe.

You can check the full source code and open it in another tab using the links.

Javascript Source Code

The Javascript source code to do "jQuery Show/Hide in safari" is

jQuery Tutorial

Jquery effects, jquery html, jquery traversing, jquery ajax, jquery misc, jquery examples, jquery references, jquery hide() method.

❮ jQuery Effect Methods

Hide all <p> elements:

Definition and Usage

The hide() method hides the selected elements.

Tip: This is similar to the CSS property display:none.

Note : Hidden elements will not be displayed at all (no longer affects the layout of the page).

Tip: To show hidden elements, look at the show() method.

Try it Yourself - Examples

hide() - Using the speed parameter How to use the speed parameter when hiding/showing an element.

hide() - Using the callback parameter How to use the callback parameter when hiding/showing an element.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

• Latest Articles
• Top Articles
• Posting/Update Guidelines
• Article Help Forum

• View Unanswered Questions
• View All Questions
• View C# questions
• View C++ questions
• View Javascript questions
• View Visual Basic questions
• View Python questions
• CodeProject.AI Server
• All Message Boards...
• Running a Business
• Sales / Marketing
• Collaboration / Beta Testing
• Work Issues
• Design and Architecture
• Artificial Intelligence
• Internet of Things
• ATL / WTL / STL
• Managed C++/CLI
• Objective-C and Swift
• System Admin
• Hosting and Servers
• Linux Programming
• .NET (Core and Framework)
• Visual Basic
• Web Development
• Site Bugs / Suggestions
• Spam and Abuse Watch
• Competitions
• The Insider Newsletter
• The Daily Build Newsletter
• Newsletter archive
• CodeProject Stuff
• Most Valuable Professionals
• The Lounge  
• The CodeProject Blog
• Where I Am: Member Photos
• The Insider News
• The Weird & The Wonderful
• What is 'CodeProject'?
• General FAQ
• Ask a Question
• Bugs and Suggestions

Javascript show/hide function in safari

Add your solution here

• Read the question carefully.
• Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
• If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › how to make hide/show when scroll down work on Safari?

• This topic is empty.
• Author Posts

This property of jQuery, it does not work well in Safari any one knows an appropriate solution to hide and show my header when I scroll down

https://codepen.io/ta_io/pen/QRgEJw

$(window).scroll(function() { $(‘.header’).stop(true, true).hide().fadeIn(‘slow’); });

Don’t know what the exact issue is because I can’t check on Safari but the code could be improved with a condition and a debounce, which might also incidentally solve what was going on.

codepen.io/rgERVN

The page jumps by the way but that is an issue on all browsers, related to removing the element from document flow.

Actually, I was wrong there. Fixed position wouldn’t cause a page jump here. No clue what I was seeing before.

Hello Shikkediel !

Thank you very much for your help, I have solved the problem with the Safari but it triggers another problem related to my collapsible nav, I need to remove the .header class from javascript so that it does not affect. I try to put this item = $ (‘.logo .nav-wrapper’), show; but it does not work, as I could put several classes to exclude the one I have.

That doesn’t work because .nav-wrapper isn’t a child of .logo … if you’re trying to target the links only then just use var item = $('.nav-wrapper') .

• The forum ‘JavaScript’ is closed to new topics and replies.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

show and hide spinner with jquery : does not work on Iphone, safary etc #4531

zskiredj commented Oct 22, 2019

mgol commented Oct 22, 2019

Sorry, something went wrong.

timmywil commented Oct 22, 2019 • edited Loading

No branches or pull requests

Home › Toolset Professional Support › [Resolved] jquery to hide a select option doesn't work in safari

[Resolved] jquery to hide a select option doesn't work in safari

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged:  Content-submission forms , Setting up custom fields , Toolset Forms , Types plugin

Related documentation:

• Front-end Content Submission and Editing Forms
• Adding Custom Fields to WordPress

This topic contains 2 replies, has 2 voices.

Last updated by Rita 1 year, 1 month ago .

Assisted by: Waqar .

I have a select field in a cred form with some jquery to hide some of the options like this:

SELECT FIELD IN THE FORM:

<div id="omit"> [cred_field field='FIELD-SLUG' force_type='field' class='form-control' output='bootstrap' select_text='Select...'] </div>

JQUERY IN THE JS EDITOR BELOW THE FORM EDITOR:

jQuery( document ).ready(function() { jQuery('#omit select option[value="OPTION-VALUE"]').hide(); jQuery('#omit select option[value="OPTION-VALUE"]').hide(); jQuery('#omit select option[value="OPTION-VALUE"]').hide(); jQuery('#omit select option[value="OPTION-VALUE"]').hide(); });

It works perfectly on Firefox and Chrome but not on Safari... I can't seem to find an answer to this problem... Does anyone by any chance have any advice or thoughts?

Thank you for contacting us and I'd be happy to assist.

This is a known limitation of Safari and you'll find many forum threads and articles on this topic online. For example: hidden link

To overcome this, you can replace the '.hide' function in the script with either the '.detach' or '.remove' function.

Related documentation: hidden link hidden link

I hope this helps and please let me know if you need further assistance.

regards, Waqar

Ok great. Thanks Waqar. That resolves the problem. Thank you!

Known issues and solutions

Frequently asked support questions

Support tickets archive

Get help from experienced contractors

Meet Toolset support team

Toolset Customer Support Policy

Need to tell us something about the quality of support

How to remove personal information from your database for support

JQuery Header Hide Scroll Not Working in Safari: A Solution

Abstract: This article discusses a common issue with JQuery header hide scroll functionality not working in Safari and provides a potential solution.

Introduction

In this article, we will discuss a common issue that developers face when working with web pages - making the header hide on scroll with a different color in Safari. While this feature works seamlessly in most browsers, it can be tricky to implement in Safari. We will provide a detailed explanation of the problem and a step-by-step solution to help you achieve the desired result.

The Problem

The problem arises when we try to change the color of the scrollbar in Safari while hiding the header on scroll. Safari does not support changing the scrollbar color natively, and the usual methods used to achieve this effect in other browsers do not work in Safari.

CSS Approach

One common approach to changing the scrollbar color is to use CSS. However, Safari does not support the scrollbar-color property, which is used to change the scrollbar color in other browsers.

JavaScript Approach

Another approach is to use JavaScript to change the scrollbar color. This can be done by creating a custom scrollbar and applying styles to it. However, this approach also has limitations in Safari. Safari does not support the -webkit-scrollbar property, which is used to create custom scrollbars in other browsers.

The Solution

To solve this problem, we need to use a combination of CSS and JavaScript. We will create a custom scrollbar using JavaScript and apply styles to it using CSS. This approach works in all modern browsers, including Safari.

Step 1: Create a Custom Scrollbar

To create a custom scrollbar, we need to use JavaScript to create a new scrolling element and apply styles to it. We can do this using the following code:

In this code, we create a new scrolling element and apply the overflow: auto property to it. We then insert this scrolling element into the DOM and move the content element inside it.

Step 2: Apply Styles to the Custom Scrollbar

Now that we have created a custom scrollbar, we need to apply styles to it. We can do this using CSS. Here is an example of how to style the scrollbar:

In this code, we apply the scrollbar-width and scrollbar-color properties to the scrolling element. We then apply styles to the scrollbar track and thumb using the ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb pseudo-elements.

Step 3: Hide the Header on Scroll

Now that we have created a custom scrollbar and applied styles to it, we can hide the header on scroll. We can do this using JavaScript. Here is an example of how to hide the header on scroll:

Encountered an issue with JQuery header hide scroll not working in Safari? Learn how to fix it and ensure your scrolling menu returns to its default color in this article.

Resolving errors when running tests in nunit console: a simple connection test.

Learn how to troubleshoot and resolve common errors when running tests in NUnit Console, using a simple connection test as an example.

Unexpected Blue and Grey Background when Starting a React App

While attempting to create a new React app and starting it using npm, an unexpected blue and grey background is displayed instead of the expected development server.

Tags: :  Jquery Menu Safari

Latest news

• Quickly Flipping UIPageViewControllers: Eliminating Momentary White Flickering
• NetShareEnum in Win32 C++: Enumerating Shares with Unexpected Results
• Error in Impython3.12 while running AngelSword tool
• Creating a Button Landing Page with Open Slideshow for a Construction Website
• Understanding CppCheck: Bound Error Dynamic Array Size in C++
• Apache Backend Socket Disconnected: Handling Timeouts in Node.js Reverse Proxy
• Setting up Django Project with Nginx, Gunicorn, and WhiteNoise on Ubuntu: A Smooth Image Upload
• Automating AWS SSM: Granting Specific Roles for Different User Types and Automation Types
• Developing a Custom Hex Editor Extension for VSCode's Memory Debugging
• Understanding the Role of style.css and styles.css in GitHub Pages
• InvalidOperationException Encountered in HotelMonolitic.Web: Activating EstadoHabitacion Entity
• Beautiful Soup and Pandas: Stacking Content with One List and a Tag Name
• Google Tag Manager and Mixpanel: Tracking Unique User Paths
• Frequently Encountered 'Orange' Lines in Cucumber/Maven/Junit Eclipse .feature Files: Maven Update Fixes
• Adding Scatter Plot to Violin Plot: A Custom Approach
• Creating Equated Display for Stationary Circular Lights in Software Development
• Next.js Project Creation Hangs During Dev Dependencies Installation
• Making a Web Application Capture Native Traffic with Python and Wireshark
• Error Creating Variable Title: Price Stripe Embedded Checkout
• Get Outlook Emails Using Azure CLI: A Step-by-Step Guide
• Using Disposable Variables in JavaScript: One Call is Enough
• PyCharm Editor: Parser/Interpreter Not Finding Installed Active Python Interpreter for Sclearn.LinearRegression
• Understanding and Tackling High Packet Loss Rates in Internet Services
• JavaScript Event Listener Not Working: Uncaught TypeError
• Qt's Use of pkg-config: An Alternative to Autotools for Project Configuration
• Unity3D: Raycasts Failing to Register Time Player at High Velocity
• Assigning Existing Function to Object Code String in Python
• Numpy DtypeSize Change Error: Potential Binary Incompatibility
• Incorrectly Applied Background Colors with '*' Attribute in CSS
• CDKTF Get Dev Overrides Provider Not Working: A Solution
• React + Django Webapp: User Messages Don't Show, Despite Server Messages
• N8N Custom Node: Company Search with Additional Action Nodes
• Getting Started with GoGetToolTip using GoogleVis and Shiny
• Automatic Resizing Columns with CSS Flex Layout: Three Columns to Two
• Utterly Bizarre Error: Two Packages Installed in Two Different Folders, One Works, Why?

• Use the old theme

Home / Fixing WordPress / Jquery not working with Safari browser

Jquery not working with Safari browser

(@darrellwilde)

2 years, 2 months ago

Got an issue with a html form on my site.

So on a desktop in chrome the form submits fine and gives me a thank you pop alert and redirects to a page however on Safari it just clears the form. Not sure if it’s a conflict with something or there is a better way to program the form.

I’m using raw html for the form and code snippets plug-in to put the JavaScript in the head.

The page I need help with: [ log in to see the link]

(@kaavyaiyer)

Hi @darrellwilde ,

I wasn’t able to submit the form in both Chrome and Safari browsers. When I submit, it just clears my form. However, a couple of errors are being flagged on submit in the Network tab of Safari’s Developer Tools.

I have uploaded a screenshot of the error here .

You might want to check where these fields are coming from and remove/handle them accordingly.

I hope this helps!

There is already a JavaScript error when loading the page:

Uncaught TypeError: $(...).datepicker is not a function

You can see this when you open the JavaScript console: https://wordpress.org/support/article/using-your-browser-to-diagnose-javascript-errors/

If this is part of your scripts, you should correct it. It is because of this line:

$( "#datepicker" ).datepicker();

and the reason is that the library for the datepicker is not loaded.

Then I also notice that the page uses a mixture of http:// and https:// . Some browsers will prevent exactly that, causing them to load only parts of the page. Since you seem to have an SSL certificate, I would recommend switching any output to https:// . In the simplest case, you only need to adjust the page URL in the WordPress settings and save the permalinks once. See: https://wordpress.org/support/article/https-for-wordpress/

Possibly both will then also solve the problems with Safari.

@threadi Ok I found the datepicker script and removed it which has resolved the errors in javascript but the form still doesnt work in Safari only Chrome for some reason.

@kaavyaiyer Are you still getting these errors now i have removed the datepicker issue?

I have no idea where it is getting those extra fields from as they are not embedded on my page.

Unfortunately it still isnt working on Safari for me only chrome on desktop.

I have made a html page just with the javascript and form on and it works. See: https://www.activetalentagency.com/form_test.htm

It just seems to be something in WordPress which is preventing it on Safari and possibly other browsers.

I also see the errors mentioned by @kaavyaiyer and can understand the error he describes. The fields are also in the source code within your form and are added by a JavaScript that is in the HTML code of the page. Here is an excerpt of it:

if ($(form).attr("method") != "get") { $(form).append('<input type="hidden" name="aEyFekStThd" value="BmMx5_J@70z8u" />'); }

Your template does not contain these fields, nor does wordpress itself create them, which is why I suspect that some plugin in your system adds them. Possibly it is an anti-spam protection plugin.

My recommendation would therefore be to deactivate all plugins and see if this changes the situation. If not, you should also change the theme as a test.

@threadi @kaavyaiyer Well guys that was strange…. I disabled all plugins, activated them one by one and the mysterious extra fields disappeared.

I have no idea why… however now the form works for me on all browsers if you can test to make sure id be grateful.

Even if it works now, the strange source code is still included in the page. If your form processing can suddenly handle it, it’s fine – but surprising.

@threadi yes i think some of that source code is from plugins, but as long as it works its ok.

One thing i have noticed is that the search function of my site has stopped working im not sure whether this has been a conflict with the new form.

The fact that the search no longer works could have something to do with this strange script. You should get an overview of which plugin is responsible for what.

I tested your page on both the browsers and the errors are still there and it just clears my form. I think the best approach for troubleshooting, like @threadi mentioned, would be to figure out which plugin is causing the extra fields to be added to your form.

Are you using any plugin for the search feature?

@kaavyaiyer really? I’ve just tested on chrome safari and edge and all seem to be working for me now.

The only thing I am using for a plug-in to do with search is a live search plugin option.

Nothing else.

I deactivated all plugins and the search still didn’t work for some reason.

The search form cannot be submitted because the jQuery from https://malsup.github.io/jquery.form.js that is included via your code sets an event here that prevents the search form from being submitted.

@threadi even when i have removed this it still doesn’t work.

I can still see it in the source code of the page. Therefore the search still does not work.

My advice would be that you look for someone who can support you directly. Within the framework of the forum this becomes more and more difficult.

• The topic ‘Jquery not working with Safari browser’ is closed to new replies.
• In: Fixing WordPress
• 3 participants
• Last reply from: darrellwilde
• Last activity: 2 years, 2 months ago
• Status: not resolved

Topics with no replies

Non-support topics, resolved topics, unresolved topics.