Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 31, 2014 at 9:12 pm #373690
    BizWizSolutions

    I am using a FullScreenSlider on my Home Page, and I am trying to have a fixed image that should always be visible and clickable. I spent hours of workaround’s but whatever I try something else strangely happens.

    http://techwizdesign.com/cap/

    1. When page first loads you don’t see it until you scroll down. Once you begin a scroll it remains visible even when you go back up to the top.
    2. When hovering on & off different portions of the image are not visible, depending on the parts of the page.

    I have no clue what this is all about.

    Thanks,

    Isaac Handler

    December 31, 2014 at 10:23 pm #373702
    Elliott

    Hi BizWizSolutions!

    Thanks for using Enfold.

    You have a fixed position set to the image which is going to make it behave like your header. I think what your wanting to use is absolute position.

    Regards,
    Elliott

    • This reply was modified 10 years, 6 months ago by Elliott.
    December 31, 2014 at 11:38 pm #373707
    BizWizSolutions

    I tried absolute and it wouldn’t show at all. It seems as if your totally in control of every image and perhaps “a” behavior, by having js listeners and they they take control.

    I am simply trying to get a fixed image on there without any of your predefined settings. A fixed image will sit in place regardless of the scroll action.

    Thanks,
    Isaac

    January 1, 2015 at 4:39 am #373756
    Ismael

    Hi!

    Looks like you finally figured it out.

    Regards,
    Ismael

    January 1, 2015 at 6:42 am #373780
    BizWizSolutions

    Hi,

    No I didn’t check out the link and see 2 obvious issues.

    1. The image is not visible when you first load the page, until you scroll down. As you begin scrolling it immediately becomes visible.
    2. As you scroll up & down notice what happens when you hover and leave the element. Different behaviors depending on the area of the page.

    I just can’t figure out what’s driving it.

    Thanks,
    Isaac

    January 1, 2015 at 5:36 pm #373844
    Elliott

    Hey!

    Go ahead and take a screenshot and highlight exactly what your trying to do. You have a bunch of custom CSS going on so I’m not really sure what your trying to do with the image.

    If your just trying to get the image to display beneath your video then add a separator element beneath your columns and insert the image element beneath it with no custom CSS being added to it.

    Best regards,
    Elliott

    January 2, 2015 at 4:51 pm #374084
    BizWizSolutions

    As seen below, I want this image there to appear immediately after page load, not just after scrolling, and it should remain there fixed on the screen position even when scrolling . I also do not want it to have any hover effects, unlike now when strange things happen to it after hovering depending on which section of the page is visible.

    Home Page

    Thanks,

    Isaac

    January 2, 2015 at 5:09 pm #374085
    Yigit

    Hey!

    Please add your image using HTML on Code Block element and wrap inside a div element with a custom class then add following code to Quick CSS in Enfold theme options 

    .your-custom-id { position: fixed; top: 20%; right: 10%; }

    and adjust as needed

    Best regards,
    Yigit

    January 2, 2015 at 9:06 pm #374219
    BizWizSolutions

    I tried this & it still doesn’t work. I made it even simpler by totally taking it out from the page design & creating the entire element directly from js as below and then gave it the style in the quick css:

    
$('<div id="fixed_all">')
	.prependTo('#top.home.page > #wrap_all > #main');
$('<a href="http://techwizdesign.com/cap/contact-us/#reqQuote">')
	.prependTo('#top.home.page #fixed_all');
$('<img class="req_quote" src="http://techwizdesign.com/cap/wp-content/uploads/2014/05/request-quote.png">')
	.prependTo('#top.home.page #fixed_all a');

    It still cannot be seen through the slider. You must scroll down for it to be seen. This has been costing me hours already. Just extremely frustrating.

    Thanks,
    Isaac

    January 2, 2015 at 10:52 pm #374287
    Elliott

    Hey!

    Add a z-index to it.

    .req_quote { z-index: 9999999; }

    Best regards,
    Elliott

    January 4, 2015 at 9:06 pm #374791
    BizWizSolutions

    Thanks much. That helped.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Putting a fixed on home page’ is closed to new replies.