ฝัง
- เผยแพร่เมื่อ 9 ก.ย. 2024
- In this video, see how to use Oxygen's search form along with custom code to create a hidden search field that is revealed on hover.
Get Oxygen ➜ oxygenbuilder....
Subscribe ➜ oxygenbuilder....
JOIN THE OXYGEN FACEBOOK GROUP FOR HELP & SECRET INFO ➜ oxygenbuilder....
![Warhammer 40k: Space Marine 2 | เพื่อจักรพรรดิ ! [ตอนเดียวจบ]](http://i.ytimg.com/vi/4M0ckYMA4-U/mqdefault.jpg)
![[Live] : ONE 168 วันนี้!! "โจนาธาน vs ซุปเปอร์เล็ก"](http://i.ytimg.com/vi/0jIN65KgJsI/mqdefault.jpg)
FYI it appears Oxygen changed how they do their code for search boxes. In 3.9 there isn't an id for the submit button, instead you need to add input[type=submit] after the search box id. So your CSS should look like this:
#_search_form-84-140 input[type=submit] {
display: none;
}
Be sure you change the 84-140 part to your Search Form's id
Do you know what code is used to target the search bar? I am trying to do what is at 4:00 in the video. I came up with this but it doesn't work.
#_search_form-196-6 input[type=search] {
background-color: rgba {232, 241, 244, 1} !important;
}
You glorious bastard!! Thanks so much, searched for 10min for this before I saw your comment...
You could also target the class .search-submit as far as I have tested it.
more more more more!! We want more super cool tutorialsss!!
Thanks Elijah: your tutorial found me rather than me having to look for it.
It's just what I need.
This is a real game changer! Can we have more tutorials on how to customize the search bar? Like adding autocomplete or live results?
Hey Elijah.
Why you didn't complete your click-function, so that it also works on mobile devices?
Please could you do a tutorial on how to create a custom woo commerce product table using the repeater? That would be cool
Ok you just won a buyer with this tutorial. I mean I knew how to do that but the fact that you took the time to make this tutorial - boom. That does the trick.
Here is the vanilla JS way of triggering the search without jQuery:
icon = document.getElementById('fancy_icon-96-26');
searchButton = document.getElementById('searchsubmit');
icon.addEventListener('click', function (event) {
searchButton.click();
});
Thanks for that, I couldn't get the old code to work in the later version of Oxygen, but this worked fine.
Thanks... worked good👍🏻
Q.
Is it possible to make the jQuery first check that there is something in the textbox before activating on click?
Great tutorial, for some reason my search input does not have an ID not sure if the Oxytoolbox plugin made a change to this element?
This should be a premade element
Would be really nice in these if you gave links or provided the code so we could save some time with a baseline.
Hi Elijah, Thank you for the great tip. can you also add video background feature for 'div' elements like we add it to sections? I also would like to make a customization option for 'ADD TO CART' text and change it to an icon. so can you make that option available in woocommerce? Also we would like to see more templates/layouts in oxygen library. recently Elementor releases huge library of templates to choose from. So we would like to see that option in oxygen. Also I would like to add pictures into text as colors like Brizy is having it. Thank you for your excellent job.
Hi Elijah, may I suggest to use code block theme Midnight or Eclipse instead of Default. It will make your code more clear to see in the video. I saw many people raised issue having trouble seeing the codes.
Thank you so much... This is very useful. I know that I will be watching this in the future so many times :)
Great video.
Exactly what I was looking for.
Works perfectly.
Thanks! :)
loved it!
Very cool! How would you remove that blu border that appears when you click in the search bar?
The blue border is added by browsers as an accessibility feature, and it really shouldn't be removed. This article discusses why you shouldn't remove it, and how you can style it to make it blend in more with your website's aesthetic: a11yproject.com/posts/never-remove-css-outlines/
Thanks for this tutorial!
Great tutorial. Is it possible to upgrade this search button to search post, pages and woo items?
Thanks Elijah for this video. I have a question does this search bar will be global to whole website and can it search for text as well?
the jQuery bit is so tiny, I could not follow the code so well. I keep getting a syntax error.
Where can we get the text documentation version for this? OR, in future video tutorials, please zoom in on the coding. Thank you.
This is the code that worked for me. You will need to change the ID:
jQuery('#fancy_icon-170-3316').on('click', function() {
jQuery('#searchsubmit').click();
});
Hi Can you please share the code it would really help beginners
This is the code that worked for me. You will need to change the ID:
jQuery('#fancy_icon-170-3316').on('click', function() {
jQuery('#searchsubmit').click();
});
Hello, great tutorial, I wonder if this is possible with products results? (I mean, the search will be product search). Thanks.
Again good 👍 one!
How to add som text like "Search..." to "s"-bar? Thanx
I'm trying to do it right now, but my search button does not have an id attached to it. It has the class searchsubmit, which enables me to hide the button with CSS, but trying to use the JS to simulate the click on the button is not working.
too much trouble to make a custom search bar... should make some prebuild to allow user to recustom it with less code
We can disappear the button with the selector detector.
Thanks for the great video. For us newbies, how do we get this to work on mobile without throwing the format of the pages out?
Also, any ideas on how to connect to the actual search function in WordPress or search plugin?
how does the search look and work in mobile?
I would like to know too.
No matter what I put in the search field it takes me to the blog page. It was working when I did the initially about a week ago, but now it doesn't work. Does this still work with Oxygen 3.8?
Please make a tutorialOverlay search bar and partial image view slider how to create
Nice tutorial. How did you style that search results page?
Never mind - found the tutorial on WPDevDesign.com.
I have a question subject: Seach form.
at the sections: 2:05 minutes. how do I get #searchsubmit ?!?
Something you didn't explain so clearly, could you please explain everyone? Thanks for this video 👍🏽
Save your code, view it live in the browser, then use your browser's devtools to find the element in the DOM-tree. It should show up as: ``
What about mobile? There is no hover possibility on mobile devices.
Please do a new version. 🙂
I know HTML & CSS but I dont know Jquery & Javascript. Is there a way I could have grabbed the jquery code from the hidden default search button and applied it to the search icon?
There is no jQuery code on the default search button. It's an input with the type of submit, so when it's clicked, the browser will - by default - submit the form that it's inside. The Javascript in this tutorial simply pushes that same default button programmatically.
FYI, I just tried this today and #searchsubmit wasn't the id. It actually didn't have one?! .search-submit was the class though.
Same for me (Oxygen 3.9). For anybody reading this, here's how I got that bit to work without an id:
#_search_form-84-140 input[type=submit] {
display: none;
}
Be sure you change the 84-140 part to whatever your Search Form's id
"Uncaught ReferenceError: jQuery is not defined on line #1"
Can u help?
Same Issue here.
its nice, but error when view in mobile!!! people can't enter search text because finger touch on icon has run submit function!!!