simcoweb

Greetings. We're running a WooCommerce cart for a client. The problem is that his supplier apparently doesn't provide any type of spreadsheet with their product info that we can use to import them into our cart. As a result, it's taking literally months to gather images, product descriptions and so forth from the supplier's site. The client is clueless on what to do and i'm tired of hand-scraping info off their site and trying to match it up with WooCommerce's needs regarding product fields. So, what i'm hoping is SOMEONE... anyone....has info on a script that can harvest product information from a source site and compile it into a CSV file. I've searched in some of the typical places but can't find anything suitable or product orientated. Please advise if you have info that could help. Thanks!

Brilliant! You're right, I wasn't even thinking in that direction. Probably because I used the CSS Classes element of the Wordpress custom menus to simply 'assign' the class to the menu thinking that I could configure a way to 'unassign' it later. So, as you suggested, I incorporated the code into an @media screen directive and, so far, it works perfectly. It displays on my computer but is removed on mobile devices. However, there's still going to be this issue of browser width. I'm not 100% certain how to handle that.

Perhaps this will help. Here's the code creating the float-shadow effect. I've tried several variations within the @media directives to 'turn off' the float-shadow effects (or, disable them basically). But to no avail. Perhaps you have some insight on which directives need to be present and what the settings are? /* Float Shadow */ .float-shadow { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 0%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .float-shadow:hover, .float-shadow:focus, .float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); /* move the element up by 5px */ } .float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ }

Thanks for your response. I've definitely considered that but there's about 40 lines of CSS related to the float-shadow class and there's 5 media queries. This could mean 200 more lines of CSS to bloat the page load. Unless, of course, there's a way to isolate the main components only and have directives just for those. So far, however, my experiments have not produced the results needed. Just for FYI, here's the code in question: /* Float Shadow */ .float-shadow { display: inline-block; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 0%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; } .float-shadow:hover, .float-shadow:focus, .float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); /* move the element up by 5px */ } .float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ }

I've added a CSS class to the main menu of a Wordpress site and wish to remove the class if the browser width drops below a certain number. I've tried a number of different approaches but none has worked. Some examples: $(document).ready(function() { if($(window).innerWidth() <= 751) { $("#top-menu .menu-item").removeClass("float-shadow"); } }); $(document).ready(function() { if $(document.width < 767) { $("#top-menu .menu-item").removeClass("float-shadow"); } }); $(function(){ if $(documentElement.clientWidth <= 767) { $("#top-menu .menu-item").removeClass("float-shadow"); } }); And a bunch of variations of these. None worked. Anyone have an answer for this? Thanks in advance for your help.

Thanks for the response and the idea. I considered that. The problem is there's about a half dozen @media controls to consider and the .float-shadow class contains 40 lines of CSS code. That would add about 240 extra lines of code to counteract the original instructions. Essentially a lot of extra bloat. It would be much simpler if there was a method of removing the CSS class from the menu completely. I've been looking at a potential solution with jQuery using their removeClass function but haven't had any luck with the proper syntax to determine the browser width and trigger the removal of the class. If you're familiar with jQuery please, by all means, post a function that you think would accomplish this.

I have Wordpress based site where i've included a class for the main menu that produces a hover and shadow effect. Problem is it breaks the menu in the fully responsive mode when the display adjusts for the viewing dimensions. So I need to remove that class from the menu for anything related to the @media controls. The site is viewable here: http://ailimconsulting.com If you view it full screen then you'll see the hover effect. Shrink it down and you'll see the menu collapses (it's designed to) but when you use the menu the shadow/hover effect is still present and 'breaks' the menu (loooks like jumbled crap). We just want to remove the hover effect for viewing on mobile devices. I'm not sure if there's a CSS way to 'remove' a class. This may have to be done with jQuery. I'm looking for options and if anyone knows how I would either remove or counteract the float-shadow class. Thanks.

Greetings. I'm working on a Wordpress site utilizing a fully-responsive theme ( www.ailimconsulting.com ). One of the features that was requested was the integration of a special menu hover effect found at GitHub that creates a shadow below the menu item being moused over ( you can see this effect by visiting the link above ). As part of the fully responsive nature of the theme, when the browser collapses to a certain point or the site is viewed on mobile devices the menu itself collapses to a single-tabbed system. The problem is that the class that controls the shadow float causes this collapsed menu to look like crap. So, we want to remove the directives of this class from all the mobile viewing settings ( the @media controls ). The effect is added to the menu via the Appearance / Menus in the CSS Classes field in each menu item with the class name of .float-shadow. The effect works perfectly in full browser mode but needs t be removed from all the @media sections of the CSS that control the fully-responsive nature of the theme in various devices dimensions. For example, these are the @media directives: /*-------------------[320px]------------------*/ @media only screen and ( max-width: 479px ) { } /*-------------------[480px]------------------*/ @media only screen and ( max-width: 767px ) { } @media screen and ( max-width: 782px ) { } @media only screen and ( min-width: 768px ) and ( max-width: 980px ) { } /*-------------------[768px]------------------*/ @media only screen and ( max-width: 980px ) { } My question is HOW can I tell these @media controls to NOT display or use the .float-shadow parameters and class. Any help with be much appreciated! If you need the actual CSS for the .float-shadow controls then I'm happy to post it.

I've set up a Wordpress site and because it contains some adult oriented materials I've had to put up a splash page with a disclaimer. The Wordpress installation is in the root folder, same as the splash page. I named the splash page as index.html. The 'home' page for Wordpress is index.php. On the splash page is a link to index.php (to enter the site) but it just keeps loading the splash page (the index.html) even though the button link is hard-coded to index.php. Furthermore, once inside the site, if you click the 'Home' button in the menu it takes you back to the splash page even though it is also hard-coded for index.php. I'm looking for the htaccess snippet that will identify these two pages and extensions as separate instead of confusing the index.html with the index.php which are probably, by default, both listed as default home page designations. The .htaccess file contains the common permalinks mod_rewrite rules as follows: # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress To summarize, i'm in need of the instructions that would identify these two file extensions as separate and allow for the links going to index.php to parse properly. Any help would be dyn-o-mite. Thanks in advanced, people!

Adam, thanks for your response. Yeah, I don't like it myself but it's how they want it to work with a couple of exceptions. When you mouse over Products the grey bar menu should appear. When mousing over the 3 items there it should remain (which it does) but once you move to the sub-menus of the grey bar then the grey bar disappears. I need for that to stay put while they are in any of the 3 sub-menus of the grey bar. That will improve the usability just doing that. The other goal was to condense this to a more efficient use of jQuery.

I inherited this menu for a client project where the basic functions were already in place. However, it was not 100% complete and my job was to adapt it to a Wordpress theme. I was able to do that and was also able to finish the menu using their methods. Here's the code: <script type="text/javascript"> jQuery(document).ready(function($) { jQuery('img[data-hover]').hover(function() { jQuery(this).attr('tmp', jQuery(this).attr('src')) .attr('src', jQuery(this).attr('data-hover')) .attr('data-hover', jQuery(this).attr('tmp')) .removeAttr('tmp'); }).each(function() { $('<img />').attr('src', jQuery(this).attr('data-hover')); }); }); jQuery(document).ready(function($) { jQuery("div.productmenu").hide(); jQuery("div.biomenu").hide(); jQuery("div.companymenu").hide(); jQuery("div.contactmenu").hide(); jQuery("div.terciarymarket").hide(); jQuery("div.byservice").hide(); jQuery("div.byproduct").hide(); jQuery("#product").mouseenter(function(){ jQuery("div.biomenu").slideUp("slow"); jQuery("#biodropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.companymenu").slideUp("slow"); jQuery("#companydropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.contactmenu").slideUp("slow"); jQuery("#contactdropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.productmenu").slideDown("slow"); }); jQuery("div.productmenu").mouseleave(function(){ jQuery("div.productmenu").slideUp("slow"); }); jQuery("#bymarket").mouseenter(function(){ jQuery("div.byproduct").slideUp("slow"); jQuery("div.byservice").slideUp("slow"); jQuery("div.terciarymarket").slideDown("slow"); jQuery("#marketdropanimate").animate({paddingTop:"40px"},"slow"); }); jQuery("div.terciarymarket").mouseleave(function(){ jQuery("div.terciarymarket").slideUp("slow"); jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow"); }); jQuery("#byproduct").mouseenter(function(){ jQuery("div.terciarymarket").slideUp("slow"); jQuery("div.byservice").slideUp("slow"); jQuery("div.byproduct").slideDown("slow"); jQuery("#marketdropanimate").animate({paddingTop:"40px"},"slow"); }); jQuery("div.byproduct").mouseleave(function(){ jQuery("div.byproduct").slideUp("slow"); jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow"); }); jQuery("#byservice").mouseenter(function(){ jQuery("div.byproduct").slideUp("slow"); jQuery("div.terciarymarket").slideUp("slow"); jQuery("div.byservice").slideDown("slow"); jQuery("#marketdropanimate").animate({paddingTop:"40px"},"slow"); }); jQuery("div.byservice").mouseleave(function(){ jQuery("div.byservice").slideUp("slow"); jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow"); }); jQuery("#biodegradability").mouseenter(function(){ jQuery("div.productmenu").slideUp("slow"); jQuery("div.terciarymarket").slideUp("slow"); jQuery("div.byproduct").slideUp("slow"); jQuery("div.byservice").slideUp("slow"); jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.companymenu").slideUp("slow"); jQuery("#companydropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.contactmenu").slideUp("slow"); jQuery("#contactdropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.biomenu").slideDown("slow"); jQuery("#biodropanimate").animate({paddingTop:"40px"},"slow"); }); jQuery("div.biomenu").mouseleave(function(){ jQuery("div.biomenu").slideUp("slow"); jQuery("#biodropanimate").animate({paddingTop:"0px"},"slow"); }); jQuery("#company").mouseenter(function(){ jQuery("div.productmenu").slideUp("slow"); jQuery("div.terciarymarket").slideUp("slow"); jQuery("div.byproduct").slideUp("slow"); jQuery("div.byservice").slideUp("slow"); jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.biomenu").slideUp("slow"); jQuery("#biodropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.contactmenu").slideUp("slow"); jQuery("#contactdropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.companymenu").slideDown("slow"); jQuery("#companydropanimate").animate({paddingTop:"40px"},"slow"); }); jQuery("div.companymenu").mouseleave(function(){ jQuery("div.companymenu").slideUp("slow"); jQuery("#companydropanimate").animate({paddingTop:"0px"},"slow"); }); jQuery("#contact").mouseenter(function(){ jQuery("div.productmenu").slideUp("slow"); jQuery("div.terciarymarket").slideUp("slow"); jQuery("div.byproduct").slideUp("slow"); jQuery("div.byservice").slideUp("slow"); jQuery("#marketdropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.biomenu").slideUp("slow"); jQuery("#biodropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.companymenu").slideUp("slow"); jQuery("#companydropanimate").animate({paddingTop:"0px"},"slow"); jQuery("div.contactmenu").slideDown("slow"); jQuery("#contactdropanimate").animate({paddingTop:"40px"},"slow"); }); jQuery("div.contactmenu").mouseleave(function(){ jQuery("div.contactmenu").slideUp("slow"); jQuery("#contactdropanimate").animate({paddingTop:"0px"},"slow"); }); }); </script> We're using the 'jQuery' instead of the '$' sign due to the 'conflict' parameters apparently inherent to the jQuery in use with Wordpress. You can see it's highly repetitious. Here's how it looks when it works: http://wp.shieldssecuritybags.com What I'm looking for is some sleeker use of the jQuery event functions and animations to consolidate this. I'm not that well versed on what jQuery functions could be substituted for much of this code. Any help/suggestions, as usual, is GREATLY appreciated!

UPDATE isc_coupons SET couponname ='CBS Local 7-2012' WHERE couponid BETWEEN 61202 AND 61267 I think that did the trick.

Sample, please?

Amazing I couldn't find this just Googling it but the results hit all around it but nothing specific. What I need to do is: 1) modify/overwrite the content in the field called 'couponname' 2) but only for the entries that are in a range of 'couponid' of 61202 and 61267 I tried this but got a syntax error: UPDATE isc_coupons SET couponname = replace(couponname,'CBS Local 7-2012') WHERE couponid BETWEEN 61202 AND 61267 A little help, please! Thanks in advance.

I went ahead and added the form code to the PHP snippet/shortcode to see if that would work. It does create the button just fine. However, it's not populating the amount to be charged with the right amount. This may be because the button form code was originally generated from the client's account WITH a value/amount in it. That amount may be embedded into the button code and my variable won't override it. OR, i'm using the wrong name for my amount variable. The PayPal site is not real helpful, to say the least. Here's what my PHP code that's executing and creating the button looks like now: $state = $_GET['state_name']; switch ($state) { case "Washington": $amount = "$30"; break; case "Utah": $amount = "$30"; break; case "Nevada": $amount = "$50"; break; default: $amount = "$30"; } if(isset($_GET['state_name'])) { return "<p><strong>The application fee for " . $state . " is " . $amount . ". Click the button below to pay via PayPal.</strong></p>" . "<p><form action='https://www.paypal.com/cgi-bin/webscr' method='post'><input type='hidden' name='amount' value='$amount' /> <input type='hidden' name='cmd' value='_s-xclick'> <input type='hidden' name='hosted_button_id' value='ZSJMKB483BBEA'> <input type='image' src='https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif' border='0' name='submit' alt='PayPal - The safer, easier way to pay online!'> <img alt='' border='0' src='https://www.paypalobjects.com/en_US/i/scr/pixel.gif' width='1' height='1'> </form></p>"; } else { return "<strong>There has been an error. Please return to the form and enter the property address to determine the cost for application fee.</strong>"; }