I'm trying to implement an expanding searchbox in wordpress. I have applied the HTML in my search-form.php and CSS in my style.css. However, I'm not sure how to apply the Jquery part. Is it as follows:-
add_action ('wp_footer','vr_search_head',1);
function vr_search_head() {
?>
<script>
$(document).ready(function(){
var submitIcon = $('.searchbox-icon');
var inputBox = $('.searchbox-input');
var searchBox = $('.searchbox');
var isOpen = false;
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('searchbox-open');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('searchbox-open');
inputBox.focusout();
isOpen = false;
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
$(document).mouseup(function(){
if(isOpen == true){
$('.searchbox-icon').css('display','block');
submitIcon.click();
}
});
});
function buttonUp(){
var inputVal = $('.searchbox-input').val();
inputVal = $.trim(inputVal).length;
if( inputVal !== 0){
$('.searchbox-icon').css('display','none');
} else {
$('.searchbox-input').val('');
$('.searchbox-icon').css('display','block');
}
}
</script>
<?php
}
search box from http://codepen.io/nikhil/pen/qcyGF/
I tried applying the above code in my child themes functions.php but it doesnt seem to work. On clicking search, the search box doesnt open.
Thanks
Related
I have a jQuery code that brings all the attributes from one side of a panel to another. This button works as an "Add All". The following code makes that happen.
So far I've done some modification in order to suit my purpose. The following code that I tried still works as an "Add All"
It keeps bringing me all the values from one table to another instead those where industry = auto.
This is the original "Add All" Code.
this.container.find(".add-all").click(function() {
var options = that.element.find('option').not(":selected");
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i) {
if (jQuery(this).is(":visible")) jQuery(options[i-1]).attr('selected', 'selected');
});
} else {
options.attr('selected', 'selected');
}
that._populateLists(that.element.find('option'));
return false;
});
This is what I've tried so far...
this.container.find(".add-auto").click(function() {
var options = that.element.find('option').not(":selected");
var elements = $('li').find("[industry]")
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i) {
if (jQuery(this).is(":visible") && jQuery(this).find("[industry = 'auto']")) jQuery(options[i-1]).attr('selected', 'selected');
});
} else {
that.availableList.children('li').each(function (i) {
if (jQuery(this).find("[industry = 'auto']")) jQuery(options[i-1]).attr('selected','selected');
});
}
that._populateLists(that.element.find('option'));
return false;
});
Without better context, it's hard to know what is not working for you. The only thing I can see as an issue is confusing this in your .each().
Consider the following:
this.container.find(".add-auto").click(function() {
var options = that.element.find('option').not(":selected");
var elements = $('li').find("[industry]")
if (that.availableList.children('li:hidden').length > 1) {
that.availableList.children('li').each(function(i, el) {
if (jQuery(el).is(":visible") && jQuery(el).find("[industry='auto']")){
jQuery(options[i-1]).attr('selected', 'selected');
}
});
} else {
that.availableList.children('li').each(function (i, el) {
if (jQuery(el).find("[industry='auto']")){
jQuery(options[i-1]).attr('selected','selected');
}
});
}
that._populateLists(that.element.find('option'));
return false;
});
If we pass in the Index (i) and the Element (el), we can ensure there is no conflict of this.
Hope that helps.
I know that this is impossible via PHP supervars, but see this website:
When we navigate on the pages, the title and meta just changes and this affect the facebook too, see:
How he is doing it? I have a ajax navigation system too, and need to set og, but I don't know how to do dinamically as he did.
Just a comment, he have hidden INPUTS with values of the meta:
But I still don't know how he can parse this before the website being rendered.
The URL fragment is NEVER sent to the server. It is used as a reference by the browser. "Traditionally" it is used to scroll to an element with the ID referenced by the fragment, however more recently it has been given some more exotic uses.
In particular, #! is a shebang, and has the meaning that "this page is being loaded by AJAX, but if you load the following relative to the domain, you will get the full page anyway" - this is particularly useful for search engines.
Basically, use AJAX combined with location.hash to get it to work.
it's just some js(jQuery)
<script type="text/javascript">
var current_page = '';
$("a").live("click", function(){
return change_hash(this,1);
});
function change_hash(el,type) {
if(type==1) {
var link = $(el).attr("href");
}
else
{
var link = el;
}
var link_ar = link.split('/#!');
if(link_ar[1]!=undefined) {
if((link_ar[1].length>3)&&(link_ar[1].substr(0,1)=='/')) {
window.location.hash = '#!'+link_ar[1];
return false;
}
else
{
return true;
}
}
else
{
return true;
}
return false;
}
$(function(){
$(window).hashchange( function(){
address = location.hash.replace("#!","");
var skip=false;
if((address.substr(0,1)=='/')&&(address!=current_page)) {
$("#content").html('<div class="content-box"><div class="ajax-loading">carregando...</div></div>');
$("html, body").animate({ scrollTop: 0 }, "slow");
if (address.indexOf(".php") == -1) {
var newaddress = address.replace(/[^a-zA-Z0-9_\.]+/g,"");
if('/'+newaddress!=address) { change_hash('/#!/'+newaddress,2);skip=true; }
address='/PerfilDetalhe.php?user='+newaddress;
}
if(skip==false) {
$.get('http://www.suamusica.com.br'+address, function(htmldata) {
$("#content").html(htmldata);
document.title = $('#metaTitle').val();
$('meta[name=description]').attr('content', $('#metaDescr').val());
$('meta[name=keywords]').attr('content', $('#metaKeywords').val());
$('meta[property="og\\:description"]').attr('content', $('#metaDescr').val());
$('meta[property=og\\:title]').attr('content', $('#metaTitle').val());
$('meta[property=og\\:url]').attr('content', $('#metaURL').val());
$('meta[property=og\\:image]').attr('content', $('#metaImage').val());
$('meta[property=og\\:type]').attr('content', $('#metaType').val());
$('meta[name=DC\\.title]').attr('content', $('#metaTitle').val());
$('meta[name=DC\\.description]').attr('content', $('#metaDescr').val());
$('meta[name=DC\\.subject]').attr('content', $('#metaKeywords').val());
}).fail(function() { $("#content").html('<div class="content-box error-box"><h1>Ooops!</h1><p>A página acessada não existe ou não foi encontrada.</p></div>'); });
current_page = address;
}
$.get('http://www.suamusica.com.br/msg_check.php', function(resp) {
if(resp==1) {
$('#msg-notify').show();
}
else $('#msg-notify').hide();
})
$('.tipsy-s').remove();
}
});
var loc_h_n = window.location.hash.replace("#", "").replace("!", "").replace(".do", ".php")
if(window.location.hash!='#!'+loc_h_n&&window.location.hash!='') {
window.location.hash = '#!'+loc_h_n;
}
$(window).hashchange();
});
</script>
as you can see he returns false on clicks and acts based on the hashtag value
I have a jQuery script that dynamically changes select menus. The script uses the function populate() everytime a change event occurs in one of the menus. I would like the same script to run after a form submit. To have an idea this is what the script looks like...
$(document).ready(function(){
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
function populate() {
if ($('#STATEID').val() == 'AK' || $('#OB_USTATEID').val() == 'DC') {
// Alaska and District Columbia have no counties
$('#county_drop_down3').hide();
$('#no_county_drop_down3').show();
}
else {
fetch.doPost('../../getCounties2c.php');
}
}
$('#STATEID').change(populate);
var fetch = function() {
var counties = $('#countyid');
return {
doPost: function(src) {
$('#loading_county_drop_down3').show(); // Show the Loading...
$('#county_drop_down3').hide(); // Hide the drop down
$('#no_county_drop_down3').hide(); // Hide the "no counties" message (if it's the case)
if (src)
$.post(src, { state_code3: $('#STATEID').val() }, this.getCounties);
else
throw new Error('No SRC was passed to getCounties!');
},
getCounties: function(results) {
if (!results)
return;
var allCities = $("<option value=\"All\">All Counties</option>");
counties.html(results);
counties.prepend(allCities);
var first = getUrlVars()["countyid"];
if (first) {
counties.val(first).attr('selected',true);
}
else {
counties.val("All").attr('selected',true);
}
$('#loading_county_drop_down3').hide(); // Hide the Loading...
$('#county_drop_down3').show(); // Show the drop down
}
}
}();
populate();
});
How can I accomplish that? Any suggestions will be highly appreciated!
Use $(element).submit(function (e) {} ); to catch a submit event. You can even fire it off, by calling $(element).submit().
jQuery docs : http://api.jquery.com/submit/
I'm receiving the following error on this line of code
select.up().appendChild(sw);
With error "SCRIPT438: Object doesn't support property or method 'up' "
This only happens in Internet Explorer... Chrome, Safari, and Firefox all run the code fine. I'm unable to find anything via Google searching for "select.up()". This code isn't my own and I'm not very adept with using DOM in Javascript.
Here is rest of the code:
<?php
$swatches = $this->get_option_swatches();
?>
<script type="text/javascript">
document.observe('dom:loaded', function() {
try {
var swatches = <?php echo Mage::helper('core')->jsonEncode($swatches); ?>;
function find_swatch(key, value) {
for (var i in swatches) {
if (swatches[i].key == key && swatches[i].value == value)
return swatches[i];
}
return null;
}
function has_swatch_key(key) {
for (var i in swatches) {
if (swatches[i].key == key)
return true;
}
return false;
}
function create_swatches(label, select) {
// create swatches div, and append below the <select>
var sw = new Element('div', {'class': 'swatches-container'});
select.up().appendChild(sw);
// store these element to use later for recreate swatches
select.swatchLabel = label;
select.swatchElement = sw;
// hide select
select.setStyle({position: 'absolute', top: '-9999px'})
$A(select.options).each(function(opt, i) {
if (opt.getAttribute('value')) {
var elm;
var key = trim(opt.innerHTML);
// remove price
if (opt.getAttribute('price')) key = trim(key.replace(/\+([^+]+)$/, ''));
var item = find_swatch(label, key);
if (item)
elm = new Element('img', {
src: '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>swatches/'+item.img,
alt: opt.innerHTML,
title: opt.innerHTML,
'class': 'swatch-img'});
else {
console.debug(label, key, swatches);
elm = new Element('a', {'class': 'swatch-span'});
elm.update(opt.innerHTML);
}
elm.observe('click', function(event) {
select.selectedIndex = i;
fireEvent(select, 'change');
var cur = sw.down('.current');
if (cur) cur.removeClassName('current');
elm.addClassName('current');
});
sw.appendChild(elm);
}
});
}
function recreate_swatches_recursive(select) {
// remove the old swatches
if (select.swatchElement) {
select.up().removeChild(select.swatchElement);
select.swatchElement = null;
}
// create again
if (!select.disabled)
create_swatches(select.swatchLabel, select);
// recursively recreate swatches for the next select
if (select.nextSetting)
recreate_swatches_recursive(select.nextSetting);
}
function fireEvent(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
function trim(str) {
return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
$$('#product-options-wrapper dt').each(function(dt) {
// get custom option's label
var label = '';
$A(dt.down('label').childNodes).each(function(node) {
if (node.nodeType == 3) label += node.nodeValue;
});
label = trim(label);
var dd = dt.next();
var select = dd.down('select');
if (select && has_swatch_key(label)) {
create_swatches(label, select);
// if configurable products, recreate swatches of the next select when the current select change
if (select.hasClassName('super-attribute-select')) {
select.observe('change', function() {
recreate_swatches_recursive(select.nextSetting);
});
}
}
});
}
catch(e) {
alert("Color Swatches javascript error. Please report this error to support#ikova.com. Error:" + e.message);
}
});
</script>
Appreciate any insight anyone could give me!
I'm pretty sure up() is a PrototypeJS method, so i'm pretty sure you would need it to work.
http://prototypejs.org/api/element/up
I m also facing this problem. so, i comment
var sw = new Element('div', {'class': 'swatches-container'});
$(select).up().appendChild(sw);
select.setStyle({position: 'absolute', top: '-9999px'})
lines from function create_swatches
and paste it in function trim(str).
After this i did not error again.
I want to validate radio button, when i checked radio button textbox will be disabled,
but it cant happens.
what will be the exact js for validate radio button.
My JS code is :
function selection_project_phd()
{
var phds = document.getElementById('EmployeeGuidedProjectPhd').value;
var projs = document.getElementById('EmployeeGuidedProjectProject').value;
var course_name = document.getElementById('EmployeeGuidedProjectCourseName').value;
if(phds == 1)
{
course_name.disable=true;
return false;
}
else
if(projs==0)
{
course_name.disable=false;
return false;
}
return true;
}
This one is View file .ctp code
Phd
Project
function selection_project_phd() {
var phds = document.getElementById('EmployeeGuidedProjectPhd').checked;
var projs = document.getElementById('EmployeeGuidedProjectProject').checked;
var course_name = document.getElementById('EmployeeGuidedProjectCourseName');
if(phds) { course_name.disable=true; return false; }
else if(projs !== true ) { course_name.disable=false; return false; }
return true;
}