m_hutchins

Well the actual image sizes are 436 px (w)x 140 px (h). Any size image I put in to the carousel, they get resized to 220px wide. I see this style added in the inspector: <div class="owl-item cloned" style="width: 220px; margin-right: 20px;"> That inline style isn't hard coded on the page(s). I seem to almost always struggle controlling and altering the image sizes on these scrollers/carousels. Hope that helps.

Hello, I seem to be having an issue getting the images in an Owl Carousel to size correctly. I think think the width of the images are being calculated in the JS, but I'm not 100%, JS is definitely not my strong suit. Maybe there's a way to override it with CSS, but I'm not having much luck. Here's a link to the site: https://www.eengineering.com/ (it's the slider right above the footer with the logo's) Any and all help would be greatly appreciated! Thanks in advance!

Hello there, I've come across an issue where I'm pretty certain is derives from the JS. I have a site I'm working on and the issue is that the main navigation on laptops and desktops that have a touchscreen display is defaulting to the "mobile/touchscreen" menu/hamburger menu. On FF and Chrome the issue is apparent, for some reason it is displaying correctly on Edge. Here are some visuals of my findings: This what we see on my laptop (with touchscreen) in FF: A: https://www.screenmailer.com/v/5jMWcKasUpzC81k This is what it should look like (same laptop with touchscreen) in Edge: B: https://www.screenmailer.com/v/06hBfp7ZYMaprGE To show why I think this is a JS issue, this is what it looks like in FF on laptop (with touchscreen) AFTER I take out the initial fucnction name "ontouchstart" on line 102 in the core.min.js file: C: https://www.screenmailer.com/v/DcakXzx8EdXhprc (you can see the "desktop" nav/menu, it's a little jacked up, but it's there) I'm working on test files to not mess with any of the live site. Test site/files/page here: http://www.mcintoshcommdev.oiw9.com/index-testing.htm I've tried for WAY too long messing with and trying to alter media query's in the CSS, with no luck. Unfortunately, I'm sh*t with JS...still super newbie! Any and all help or nudge in the right direction would be GREATLY appreciated! Thanks in advance, mh

I found this solution and it seems to do the trick as far as I can see: a[name] { padding-top: 110px; margin-top: -110px; display: block; }

Hello, I'm in need to alter the "landing"/on click position of all the sites page anchor links (<a name="name-here">). I have a sticky menu that cover the titles of the section being linked to. I was initially trying to style the "a name" but I'm not sure it that's possible. So, if I were to have: <a name="page-title"></a> <h2>Title of Section Ect.</h2> <p>Information about this sections and da, da, da....</p> <a name="page-title2"></a> <h2>Another Title of Section Ect.</h2> <p>Some more Information about this sections and da, da, da....</p> I'm wondering if I can do something in CSS to cover all "name." I'm able to add spacing to the top/before using: a[name]:before { content:""; display:block; margin-top: 75px; } ...but then I'm just adding a fat gap before each section and it looks bad. I can't go through and add an id and/class to all these links, it's just not possible at this point. Hope this makes sense. Any help and/or suggestions are greatly welcome. Thanks in advance! m@

Hello, I currently have a navigation that I'm not able to add a "working" link to the main button. I can add a link, but it won't go any where unless I take a class off the button, then when the site is viewed in mobile, the dropdown won't appear, it just goes straight to the main button's page. So, unless I add separate "whatever-page-index-page" to the dropdown (which looks super lame) you can't get to the sites section index/homepages from the main navigation. The site is located here: http://sierraelectronics.oiw10.com/industry-solutions/index.htm I'm trying to implement some code from a tutorial I found, example: http://sierraelectronics.oiw10.com/nav-testie-01.htm#nav (only works correctly on mobile device) (tutorial site: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly) I have a feeling that there may need to be some Javascript tweaking or editing, but I'm not sure where to start on this one. Any and all help would be greatly appreciated! Thanks in advance, mh

Hello there, I'm trying to add certain/specific images pages using JS. I'm trying to load the image to the page based on the url. The image is loading,but breaking the layout a bit. This is the code I'm trying/testing with now: var current = window.location.href; if ( current == "http://www.sjmradio.oiw9.com/industry-solutions/construction.htm" || current == "http://www.sjmradio.oiw9.com/industry-solutions/construction.htm/" ){ $('<img class=" class="fade-in" src="/images/headers/industry-construction.jpg').html("#page-header"); } I'm also using some code for other pages to load random images into the same id (of different pages of course) and it works fine. This is the code I'm using for that: //Add your images, we'll set the path in the next step var images = ['top-header-001.jpg', 'top-header-002.jpg', 'top-header-003.jpg', 'top-header-004.jpg', 'top-header-005.jpg', 'top-header-006.jpg', 'top-header-007.jpg', 'top-header-008.jpg', 'top-header-009.jpg', 'top-header-010.jpg', 'top-header-011.jpg', 'top-header-012.jpg','top-header-013.jpg','top-header-014.jpg','top-header-015.jpg','top-header-016.jpg','top-header-017.jpg','top-header-018.jpg','top-header-019.jpg', 'top-header-020.jpg']; //Build the img, then do a bit of maths to randomize load and append to a div. Add a touch off css to fade them badboys in all sexy like. $('<img class=" class="fade-in" src="/images/random-headers/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#page-header'); Any help would be greatly appreciated! Thanks in advance, mh

Hello, I have a random background image running and loading the background image into a div with the id=page-header. I got the image itself to be responsive, but I also need its parent div's height to be responsive as well. Right now the image seems to size correctly, but once it gets smaller in height than the parent div, that div's bg color shows above and below. I've tried a few different things with the height, but am having no luck. the site is here: sjmradio.oiw9.com/about-us/customer-service.htm Here's the code that I currently have on the parent div: #page-header { position: relative; height: 360px; margin-bottom: 50px; background: no-repeat center center; color: #fff; background-color: #424242; background-size: 100%; } This is what I'm using for the JS for the random image: var imgCount = 4; var dir = '/images/random-headers-about/'; var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1; var images = new Array images[1] = "about-top-header-001.jpg", images[2] = "about-top-header-002.jpg", images[3] = "about-top-header-003.jpg", images[4] = "about-top-header-004.jpg", document.getElementById("page-header").style.backgroundImage = "url(" + dir + images[randomCount] + ")"; Any and all suggestions are welcome! Thanks in advance, mh

I'm really curious as to why it seems to work fine on an iPhone but not some of the other devices. Any thoughts?

Hello All, (I'm not quite sure where the problem derives from, so I'm just posting this in the General section) Here's the problem I've been having with some sites. The main navigation with drop down menus when they're responsive/mobile menus. For instance this site I'm currently working on: communicationsexpress.oiw9.com. Minus the top level "about us" btn, (for now I took the link off of the top level "about us" button and added an "about us home" btn at the bottom of the drop down.) the top level btn's all link to the index pages of their sections. Great. Now, when you shrink the screen or go to mobile version and the "hamburger" menu pops up, I'm having some conflict with those top level btn's when there linked. On some devices, if you click on the top level btn, instead of the drop down showing first then clicking on what link you want, it just goes to that btn's link. If that makes sense. Basically, I'm trying to figure out a work around so that main btn works properly in mobile versions and not have to have a "page home page" btn for each top level section btn. Or at least not have that on the main site and possibly just have that on maybe a separate mobile menu...which might be a pain in the ###### to try to use separate menus. Any and all suggestions and help is greatly appreciated! Thanks in advance, mh

Hello All, I currently have a 3D rollover effect on some images that seems to be working pretty well in FF and Chrome. In IE not so much, I understand that IE doesn't support this yet. I'm trying set the IE css to just have the image slide over (as oppose to the folding effect that it should have and does have in the other browsers). My initial JS code has a call to load a separate css for IE, but that doesn't seem to be functioning correctly. This is the code I have for that: <script type="text/javascript"> Modernizr.load({ test: Modernizr.csstransforms3d && Modernizr.csstransitions, yep : ['/assets/vendors/jquery-2.1.4.min.js','/assets/js/jquery.hoverfold.js'], nope: '/css/fallback.css', callback : function( url, result, key ) { if( url === '/assets/js/jquery.hoverfold.js' ) { $( '#grid' ).hoverfold(); } } }); </script> Now I'm just trying to call the IE specific styles through the "fallback.css" by using this code: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ .view { overflow: hidden; width: 980px; height: 400px; margin: 0px; float: left; position: relative; border: 8px solid #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); background: #333; margin-top: 35px; } .view:hover img { left: -85px; } .view div.view-back { background: #666; } } This issues is that I can't seem to get the "fallback.css" to override the 3D effect and IE is trying to do that when rolled over instead of all the other styles I've tried for the IE rollover. Any and all suggestions and help is very welcome! Thanks once again in advance, mh

Hello there, I quite stumped on what appears to be a JS conflict. I have a rollover effect on landing pages, and also have a sticky menu. When on the landing page(s) with the rollover effects, and you scroll down and scroll over the top sticky menu (not the static nav), after you roll off the drop down of the menu, it will not disappear. I'm having a hard time pin pointing what/where the conflict is. Here is a link to a page where I'm having a issue: http://radionorthgroup.oiw9.com/our-services/index.htm Any and all help would be greatly appreciated. Thanks in advance, m@

After further investigating, I believe that the reason the main nav was setup this was is because the mobile nav. When the site goes to mobile the main nav's primary btns are shown and the nav acts as a toggle nav. Is there a way to keep the mobile nav to work properly but still have the primary btns in the nav clickable on the desktop version? Ugh.

Sorry, I seemed to have accidentally posted this thread twice...

Hello there, I have a main nav with some drop down elements, but the way this particular menu is coded the main btn for the catergory isn't clickable. It has a rollover state that allows the drop down menu to appear and there is a spot to insert a link, but I just can't seem to get that main btn to be clickable. (there's also "secondary" drop out menus within the drop down menus that basically have the same issue of not being clickable) Here is a link to the site as is at the moment: http://sierraelectronics.oiw10.com And here is the code being used for a drop down section of the first btn in the main nav (with multiple columns): <div class="navbar-cell stretch"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <div class="navbar-cell"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Commercial <b class="fa fa-angle-down"></b></a> <ul class="dropdown-menu"> <li> <div class="yamm-content"> <div class="row"> <div class="col-md-3 col-xs-12 nopadding"> <div class="box"> <ul> <li><a href="/motorola/index.htm">Commercial Radios</a> <li><a href="/motorola/accessories/index.htm">Accessories</a></li> <li><a href="/motorola/dispatch-consoles.htm">Dispatch / Consoles</a></li> <li><a href="/motorola/mobile-radios.htm">Mobile Radios</a></li> <li><a href="/motorola/portable-radios.htm">Portable Radios</a></li> <li><a href="/motorola/mototrbo/repeaters.htm">Repeaters</a></li> </ul> </div><!-- end box --> </div><!-- end col --> <div class="col-md-3 col-xs-12 nopadding"> <div class="box"> <ul> <li><a href="/motorola/mototrbo/index.htm">MOTOTRBO Digital</a> <li><a href="/motorola/mototrbo/why-digital.htm">Why Digital Two-Way</a></li> <li><a href="/motorola/mototrbo/hear-the-difference.htm">Hear The Difference</a></li> <li><a href="/motorola/mototrbo/system-equipment.htm">Equipment Portfolio</a></li> <li><a href="/motorola/mototrbo/portable-radios.htm">MOTOTRBO Portables</a></li> <li><a href="/motorola/mototrbo/mobile-radios.htm">MOTOTRBO Mobiles</a></li> <li><a href="/motorola/mototrbo/repeaters.htm">MOTOTRBO Repeaters</a></li> <li><a href="/motorola/mototrbo/mototrbo-systems.htm">MOTOTRBO Systems</a></li> <li><a href="/motorola/mototrbo/wave3000.htm">WAVE (PTT)</a></li> </ul> </div><!-- end box --> </div><!-- end col --> <div class="col-md-3 col-xs-12 nopadding"> <div class="box"> <ul> <li><a href="/motorola/mototrbo/applications/index.htm">MOTOTRBO Applications</a></li> <li><a href="/motorola/mototrbo/applications/command-and-control.htm">Command and Control</a></li> <li><a href="/motorola/mototrbo/applications/email-and-text.htm">Email and Text</a></li> <li><a href="/motorola/mototrbo/applications/interoperability.htm">Interoperability</a></li> <li><a href="/motorola/mototrbo/applications/location.htm">Location </a></li> <li><a href="/motorola/mototrbo/applications/personnel-safety.htm">Personnel Safety</a></li> <li><a href="/motorola/mototrbo/applications/system-monitoring.htm">System Monitoring</a></li> <li><a href="/motorola/mototrbo/applications/voice-dispatch.htm">Voice Dispatch</a></li> <li><a href="/motorola/mototrbo/applications/work-ticket-management.htm"> Work Ticket Management</a></li> </ul> </div><!-- end box --> </div><!-- end col --> <div class="col-md-3 col-xs-12 nopadding"> <div class="box"> <ul> <li><a href="/motorola/in-building-solutions.htm">In Building Solutions</a></li> <li><a href="/WAVE/index.htm">Voice Applications</a></li> <li><a href="/radio-selector-guide/index.htm">Radio Selector Guide</a></li> <li><a href="/motorola/accessories/featured/index.htm">Featured Accessories</a></li> <li><a href="/current-promotions.htm">Current Promotions</a></li> </ul> </div><!-- end box --> </div><!-- end col --> </div><!-- end row --> </div><!-- end yamm-content --> </li> </ul> </li> (following code to complete main nav) And here is the code being used for a drop down section of the main nav (with one column): <li class="dropdown has-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Industries <span class="fa fa-angle-down"></span></a> <ul class="dropdown-menu start-left" role="menu"> <li><a href="/industry-solutions/construction.htm">Construction</a></li> <li><a href="/industry-solutions/education.htm">Education</a></li> <li><a href="/industry-solutions/gaming.htm">Gaming</a></li> <li><a href="/industry-solutions/government-services.htm">Government</a></li> <li><a href="/industry-solutions/healthcare.htm">Healthcare</a></li> <li><a href="/industry-solutions/hospitality-retail.htm">Hospitality and Retail</a></li> <li><a href="/industry-solutions/manufacturing.htm">Manufacturing</a></li> <li><a href="/industry-solutions/public-safety.htm">Public Safety</a></li> <li><a href="/industry-solutions/transportation-logistics.htm">Transportation</a></li> <li><a href="/industry-solutions/utilities.htm">Utilities and Energy</a></li> <li><a href="/industry-solutions/index.htm">Industries Home</a></li> </ul></li> I hope this makes sense. Any and all help would be greatly appreciated! Thanks in advanced, m@

Hello, I currently have a page id that is loading a random image on every page using JavaScript. I need to setup the JS file to load a specific image for a handful of specific pages. I'm a little stumped on how to call those pages and attach the background image for the id to it. Here is the code that I currently have for the random images: var imgCount = 17; var dir = '/images/random-headers/'; var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1; var images = new Array images[1] = "top-header-001.jpg", images[2] = "top-header-002.jpg", images[3] = "top-header-003.jpg", images[4] = "top-header-004.jpg", images[5] = "top-header-005.jpg", images[6] = "top-header-006.jpg", images[7] = "top-header-007.jpg", images[8] = "top-header-008.jpg", images[9] = "top-header-009.jpg", images[10] = "top-header-010.jpg", images[11] = "top-header-011.jpg", images[12] = "top-header-012.jpg", images[13] = "top-header-013.jpg", images[14] = "top-header-014.jpg", images[15] = "top-header-015.jpg", images[16] = "top-header-016.jpg", images[17] = "top-header-017.jpg", document.getElementById("page-header").style.backgroundImage = "url(" + dir + images[randomCount] + ")"; A bit of a side note/help, I would also like to just have the random image called from the folder and not listed out, is this possible? Any and all help is greatly appreciated! Thanks in advance, mh

Hello, I'm trying to have a separate image with a link on the sticky header different from the linked image from the static header. I currently have the same image on both, but would like to use different images. You can view here: http://www.sjmradio.oiw9.com/contact-us.htm The code is that I'm using is pretty straight forward for the image - CSS: #logo { padding: 45px 0 30px 0; } #logo a { display: inline-block; max-width: 100%; /* 1 */ } #logo img { display: block; } HTML: <div id="logo"> <a href="/index.htm"><img src="/images/sjm-logo.png"></a> </div> Any and all thoughts would be greatly appreciated! Thanks in advance, mh

I believe everything is good with the structure. They both pretty look like this: <ul id="menu"> <li class="drop"><a href="/about-us/index.htm">About Us</a> <ul> <li><a href="page.htm"> And the id and class names are either the same or are correct and match the menu. I'm pretty much stumped here.

I'm not sure I'm following about the HTML structure. Everything on the page (as far as I can tell) is setup pretty much the same as the site that the code is working on. I also have this script right above the previously provided code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> I have tried to include a different jQuery file and script with no luck.

Hello All, I've been having an issue with getting this code to work on one site that was copied from another site that it works fine on. The code is basically to make the main navigation button show an "active" style to reflect what page (section/page) your on. The site I'm trying to get it work on now is: http://mototrbo.spcomm.com and this is the code I'm using: <script> $(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(//$/, ""); path = decodeURIComponent(path); $("#menu a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('current-menu-item'); $('li.current-menu-item').parents().not('ul').addClass('current-menu-item'); } }); }</script> Any thoughts and/or help would be greatly appreciated! Thanks in advance, mh

I have the jQuery library included in the head. Then I have the above script following the menu. Does that answer anything. If I'm doing things correctly, I'm seeing the same "error" in the console on both the site that the script is working (www.tfmcomm.com) and the site that I'm trying to get it to function on (http://clarkwireless.oiw10.com). Not. To. Sure...

Hmm, I'm not really familiar with what to look for in the error console. But, I ran it on the site that the code it coming from (working); tfmcomm.com and I'm not seeing a difference. My initial guess is that I'm missing something with the parent/child li and ul and/or something with the different id/class names??? But, yet again, that's why I'm here...

Hello, I had some help here a little while ago on getting some code to work so that the buttons of the main navigation of the site reflected with page and/or section you are in/on. I am trying to re-use the code on a new site and am running into some issues...mainly, it's not working. The new site is here: http://clarkwireless.oiw10.com I ended up using this code to target all the "main/top layer" buttons: <script> var current = window.location.href; if ( current == "http://clarkwireless.oiw10.com" || current == "http://clarkwireless.oiw10.com/" || current == "http://clarkwireless.oiw10.com/index.htm" ){ jQuery('#menu > li > a[href=/index.htm]')().addClass("active"); } else if ( current.indexOf("http://clarkwireless.oiw10.com/about-us/") > -1 || current.indexOf("http://clarkwireless.oiw10.com/news") > -1 || current.indexOf("http://clarkwireless.oiw10.com/resources") > -1 || current.indexOf("http://clarkwireless.oiw10.com/videos") > -1 || current == "http://clarkwireless.oiw10.com/contact-us.htm" ){ jQuery('#menu > li > a[href$=/about-us/index.htm]').parent().addClass("active"); }</script> And I ended up using this code to catch the buttons in the drop downs: <script> $(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(//$/, ""); path = decodeURIComponent(path); $("#menu a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('active'); $('li.active').parents().not('ul').addClass('active'); } }); } </script> I've tried a few things with the CSS and within the Javascript, but it's a little over my head. Any help would be greatly appreciated! m@

Ok, I switched gears and am trying to go a different route. I'm using some code I found from an older site, and it seemed to work fairly well on that site (when we used it). I'm seeming to still have an issue with this site though. Maybe an extra set of "better adjusted" eyes will help... The site is www.tfmcomm.com and Here's the code: var current = window.location.href; if ( current == "http://www.tfmcomm.com" || current == "http://www.tfmcomm.com/" || current == "http://www.tfmcomm.com/index.htm" ) { jQuery('#mainmenu > li > a[href$=index.htm]').addClass("current-menu-item"); } else if ( current.indexOf("http://www.tfmcomm.com/about-us/") > -1 || current == "http://www.tfmcomm.com/contact-us.htm" > -1 || current.indexOf("http://www.tfmcomm.com/news") > -1 || current.indexOf("http://www.tfmcomm.com/resources") > -1 || current.indexOf("http://www.tfmcomm.com/videos") > -1 ){ jQuery('#mainmenu > li > a[href$=/about-us/index.htm]').addClass("current-menu-item"); } ....etc. Thanks once again!