http://designspiration.net - If you click on search at the top of the page, you are presented with a really cool minimal search form, But I cannot find out how they did it. Does anyone know/could anyone find out what was used? Thanks
It's done with CSS and jQuery, pretty easy actually.
I have created an example on jsFiddle demonstrating how it could be done:
$(document).ready(function(){
var $overlay = $('#overlay');
$('#search').click(function(){
if ( $overlay.is(':visible') ) {
$overlay.fadeOut();
} else {
$overlay.fadeIn();
}
});
$('#close').click(function(){
$overlay.fadeOut();
});
});
Have a look here: http://jsfiddle.net/peduarte/VeRMW/
The main functions are, click, fadeIn and fadeOut.
It uses an overlay on the whole page and a big text field with no borders which search on enter and some suggestions
You could do it by jQuery & CSS
Related
After combing the forums and how-to guides, I have found a solution to a Smooth Scrolling problem that I had, but I'd like to ask some kind folks if the solution below will work for me before I try it, or if I'm missing something important.
I'm working on a live site and I don't want to create problems or break anything, so I'd like to be sure before I add the code below. I also know nothing about java or coding, so please forgive me if I don't use the right terms.
I want to enable smooth scrolling to an anchor on another page.
e.g. from my home page "domain.com/home", click the link, then
load the new page, e.g. "domain.com/contact"
and on loading the new page, smoothly scroll to the anchor, "domain.com/contact#section1".
Currently, it simply jumps, and I'd like to know if the steps below will enable the smooth scrolling.
I'm planning to:
Add the following codes to the website template's '' section (in the Joomla admin panel):
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I'm unsure whether this is necessary because I already use jQuery with some components, is it unnecessary to load jQuery again? Or will it not hurt to add this code regardless?
Then add this code to the same section in the template:
<script type="text/javascript" >
$('html').css({
display: 'none'
});
$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
display: 'block'
});
}
});
function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
}
</script>
As far as I know, this will enable the smooth scrolling, but I haven't added anything like 'smoothscroll.js' (which I've read a lot about) -- will that also need adding in the '' (after I upload it to the server), or is that included in the jQuery library?
I'm sorry if this seems very naive, I'm learning as I go. Thank you very much in advance to anyone who provides some feedback on this, I am truly grateful for your time and patience.
Best,
Ben
Firstly, Joomla already loads jQuery, so you do not need to load it again. I would either use a Joomla extension (there is a free one here) or use a smooth scroll library (like this one). Assuming you choose to do the latter, you just need to put the link in your Joomla template to the JS file and initialise it (this is all explained on the Github project page).
Both options are simple but if you don't have much experience in coding then the extension is probably the best way to go.
EDIT: To use smoothscroll on page load with the GitHub library, you will need to change your last function to:
function smoothScrollTo(anchor) {
var scroll = new SmoothScroll();
scroll.animateScroll(anchor);
}
Okay so I am looking at this website, http://codetunnel.net/, and I saw that it only used one page, but jQuery was used to display different divs, therefore making it feel like a multipage website. I tried using the jQuery in my codepen, but it never worked. Can someone help me understand how the jQuery works, and how I can implement it into my own sites? The jQuery looks like this:
$(function(){
$("#nav-home").click(function(){
$("#home").show();
$("#projects").hide();
$("#contact").hide();
$(".selected").removeClass("selected");
$("#nav-home").addClass("selected");
});
$("#nav-projects").click(function(){
$("#home").hide();
$("#projects").show();
$("#contact").hide();
$(".selected").removeClass("selected");
$("#nav-projects").addClass("selected");
});
$("#nav-contact").click(function(){
$("#home").hide();
$("#projects").hide();
$("#contact").show();
$(".selected").removeClass("selected");
$("#nav-contact").addClass("selected");
});
});
https://codepen.io/orchtechnerd/pen/dRzGZV // my codepen
Actually, your code works.
Unfortunately, the visible div is covered by the #nav.
So the only thing you should do is add a "padding-top: 4em" style to the body.
I'm trying to toggle a div on click via jQuery.
But somehow on my live site it does not work at all.
I tried .toggle; hasClass .addClass .removeClass in if/else; also .show/.hide on if/else and so on.
But somehow the content does not get displayed or cannot be hidden.
Here is my working fiddle with the segment DOM of the livesite:
JSFiddle Example
$(".jsselect").click(function() {
var popup = $(this).next(".popup_select");
if (popup.hasClass('showit')) {
popup.removeClass('showit');
} else {
popup.addClass('showit');
}
});
Here is my livesite: Livesite
Well,
sometimes you just need to go to bed and figure out, that you've added the same script.js twice - so the code did execute twice.
Well, screw me then ;)
Thank you all so much!
I'm looking to use this code in JS Fiddle http://jsfiddle.net/syE7s/ to load some content into a div.
It's exactly what I need but I want link A to auto load when the page loads. My knowledge of Javascript is fairly minimal so if someone could get it working in jsfiddle I would be very greatful.
I've tried googling everything but I just can't seem to make it work.
It is essential I use the HTML as the links I use parse tokens that use {} to identify them as tokens but it obviously gets confused with Javascript when they are sat together.
enter code here
thanks
Here is a working JS Fiddle, I added a function to load the first link :
function launch() {
var link = $('#A').attr("href");
$('#target').load(link);
}
launch();
http://jsfiddle.net/dhmLjme6/
You can add just one line to your javascript.
It will look like this (line 3):
$(document).ready(function(){
$('#target').load($('.trigger').attr("href"));
$('.trigger').click(function(e){
e.preventDefault();
var link = $(this).attr("href");
$('#target').load(link);
});
});
I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class