Jump to content

m_hutchins

Members
  • Content count

    26
  • Joined

  • Last visited

Community Reputation

0 Neutral

About m_hutchins

  • Rank
    Newbie
  1. m_hutchins

    Trouble Sizing/Re-sizing Images in Owl Carousel

    That's what I was kind of figuring, I just can't seem to figure out how to adjust the calculation(s)...
  2. m_hutchins

    Trouble Sizing/Re-sizing Images in Owl Carousel

    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.
  3. 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!
  4. 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
  5. m_hutchins

    Needing to add spacing on all page anchor links

    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; }
  6. 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@
  7. 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
  8. 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
  9. 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
  10. m_hutchins

    Main Menu Having Issues in Mobile/Responsive

    I'm really curious as to why it seems to work fine on an iPhone but not some of the other devices. Any thoughts?
  11. 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
  12. m_hutchins

    IE Specific Rollover Effect

    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
  13. 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@
  14. m_hutchins

    How to make main btn in drop down menu link to a page

    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.
  15. m_hutchins

    How to make main btn in drop down menu link to a page

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