Jump to content

simcoweb

Members
  • Content count

    1,104
  • Joined

  • Last visited

Community Reputation

0 Neutral

About simcoweb

  • Rank
    Prolific Member

Contact Methods

  • Website URL
    http://www.phpfreaks.com

Profile Information

  • Gender
    Not Telling
  • Location
    CA
  1. Greetings. I'm using a newsletter subscription plugin that doesn't have parameters for making fields required (don't ask why). The system is connected to Mailchimp but because the first and last names are not 'required' many of the submissions have been email address only. I found this JQuery snippet that validates that the 'first name' field is populated before submission. The problem is I need the 'last name' field validated as well. I played around with the code but my syntax knowledge is really rusty and the two ways I tried to add that field into the mix failed. Here's the code: <script type="application/javascript"> (function($) { $(document).ready(function() { $(" .et_bloom_submit_subscription").click(function(){ if ($('.et_bloom_submit_subscription').closest('.et_bloom_form_container').find('.et_bloom_subscribe_name input').attr('value') == '') { $('.et_bloom_submit_subscription').closest('.et_bloom_form_container').find('.et_bloom_subscribe_name input').addClass('et_bloom_warn_field'); return false; } else { $('.et_bloom_submit_subscription').closest('.et_bloom_form_container').find('.et_bloom_subscribe_name input').removeClass('et_bloom_warn_field'); } }); }); })(jQuery) </script> The last name field class is .et_bloom_subscribe_last which I tried splicing in a various ways but it didn't work. Can anyone provide the proper syntax to add this into the mix so that the 'warn_field' covers it as well? Thank you in advance.
  2. Greetings. I'm using the Divi theme from Elegant Themes for a new magazine style project. The theme does not display the caption for any of its image related modules and the featured image that displays in the posts as the thumbnail does not. We need the caption to display for legal reasons since it will attribute the source of the image. Here's the code they use for their theme display in the single.php file: } else if ( ! in_array( $post_format, array( 'gallery', 'link', 'quote' ) ) && 'on' === et_get_option( 'divi_thumbnails', 'on' ) && '' !== $thumb ) { print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); echo wp_kses_post(get_post(get_post_thumbnail_id())->post_excerpt); } else if ( 'gallery' === $post_format ) { et_pb_gallery_images(); } Basically this is a custom function instead of using the standard Wordpress function. I searched around the Wordpress plugin repository and found someone who posted this code as a possible fix: <div class="et_post_meta_wrapper"> ... <?php if (get_post(get_post_thumbnail_id())->post_excerpt) { // search for if the image has caption added on it ?> <div class="featured-image-caption"> <?php echo wp_kses_post(get_post(get_post_thumbnail_id())->post_excerpt); // displays the image caption ?> </div> <?php } ?> </div> <!-- .et_post_meta_wrapper --> The problem is, where he says to insert this (just before the closing </div> tag for the wrapper, ) the caption displays at the bottom of the page, not underneath the featured image. I'm thinking that this code can be adapted to the same section of the code I posted above so that it all works as one unit in summoning the thumbnail and the caption. However, my PHP skills are not up to speed in order to conjure up the correct syntax for merging these two. Any help would be greatly appreciated. Thanking everyone in advance!
  3. 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!
  4. simcoweb

    How Can I Unassign A Class For @media controls

    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.
  5. simcoweb

    How Can I Unassign A Class For @media controls

    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) */ }
  6. 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) */ }
  7. 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.
  8. simcoweb

    How Can I Unassign A Class For @media controls

    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.
  9. 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.
  10. 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.
×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.