SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    manipulate css with javascript

    re:http://www.jorgemonedero.com/blog/in...tamara-rojo-2/
    I wish to move the close button (return to index) on the top right underneath the social media buttons to the bottom, along side the artist name - publication and image count.
    When i change the css the button disappears behind a layer or div?
    someone mentioned using javascript to manipulate the css - can anyone help?

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here are all the ways to manipulate CSS with js. http://www.websitecodetutorials.com/...javascript.php. Post back if that is not what you meant.

  3. #3
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    Here are all the ways to manipulate CSS with js. http://www.websitecodetutorials.com/...javascript.php. Post back if that is not what you meant.
    Hi, thanks for that but it is not what need. These scripts are concerned with working in the absense of javascript; i need a javscript that over-rides the CSS

  4. #4
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    close button element is being obscured because it's hitting the edge of the containin

    re:http://www.jorgemonedero.com/blog/in...tamara-rojo-2/
    I wish to move the close button (return to index) on the top right underneath the social media buttons to the bottom, along side the artist name - publication and image count.
    When i change the css the button disappears behind a layer or div?
    someone mentioned using javascript to manipulate the css - can anyone help?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Your link broke for some reason.

  6. #6
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I don't see the button you are referring to.

  8. #8
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    top right below the twitter and instagram symbols

  9. #9
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Went to your site twice...here & codingforums...both times I see no close button. Granted I only use one eye to see with, but I don't think I'm that blind. But, if you mean what I think you mean, you'll need to put the button in a div and then relocate it's position (top, left) to the new position.
    Where the World Once Stood
    the blades of grass
    cut me still

  10. #10
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,229
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    That page does seem to have problems.

    But if you go to portfolio/marios-schwab-2/ you'll see
    close.png

  11. #11
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the black square with a X.
    I thought it was already in a div: <div class="close-btn" title="Close"></div>

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by indigojones666 View Post
    the black square with a X.
    I thought it was already in a div: <div class="close-btn" title="Close"></div>
    There doesn't appear to be such a div on the page you linked to. You could really help yourself here by linking to a page the demonstrates the problem and clearly indicating where the problem is. Help us to help you.

  13. #13
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There doesn't appear to be such a div on the page you linked to. You could really help yourself here by linking to a page the demonstrates the problem and clearly indicating where the problem is. Help us to help you.
    this page: http://www.jorgemonedero.com/blog/in...hard-nicoll-2/ (if the button is not there refresh)
    right click on it in firefox > inspect element which will show you <div class="close-btn" title="Close"></div>.
    I want to move the button to the bottom to sit alongside the artist name - publication and photo count
    Last edited by Mittineague; Nov 27, 2013 at 21:10.

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by indigojones666 View Post
    Hi, thanks for that but it is not what need. These scripts are concerned with working in the absense of javascript; i need a javscript that over-rides the CSS
    FYI that would override CSS just like CSS would.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by indigojones666 View Post
    this page: http://www.jorgemonedero.com/blog/in...hard-nicoll-2/ (if the button is not there refresh)
    right click on it in firefox > inspect element which will show you <div class="close-btn" title="Close"></div>.
    I want to move the button to the bottom to sit alongside the artist name - publication and photo count
    Hm there must be something else going on here. No button appears in my Mac browsers, and I can't see any trace of the button in the inspector.

  16. #16
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Maybe the <div class="close-btn" title="Close"></div> is visible as you see the page http://www.jorgemonedero.com/blog/index.php/portfolio/richard-nicoll-2/ locally,
    but online there is no <div class="close-btn" title="Close"></div> on that page: not in the normal source code, and not in the generated source code by javascript.

    But as Mittineague said , the button can be found on http://www.jorgemonedero.com/blog/index.php/portfolio/marios-schwab-2/.

    Now in the stylesheet http://www.jorgemonedero.com/blog/wp-content/themes/expression/style.css?ver=3.7.1 are from line 1290 (!) the styles for the close button:
    Code:
    .close-btn {
        background-image: url("images/close-button.png");
        cursor: pointer;
        height: 27px;
        opacity: 0.5;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 27px;
    }
    If you change the right: 10px in left: 10px, then the button is coming just under the menu.

    But what is the difference between the Close button and the Home-link?

  17. #17
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Some minutes later: button disappeared also from the marios-schwab-2 page!
    I see in the source code for the jQuery options:
    Code:
    showClose:false,
    That's logical, isn't it?

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by Francky View Post
    But as Mittineague said , the button can be found on ...
    Not in any of my browsers.

  19. #19
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Off Topic:

    Not in any of my browsers.
    Ha! A beautiful crosspost!
    At the same moment I saw (#18) the button had disappeared from the page where it was before!

    And indeed, now I don't see it either on any page of the site (and everywhere in the JQuery settings is commanded showClose:false,).

    It looks like indigojones666 has decided to remove all Close-buttons; then our button search actions are in vain, and the start question is not relevant anymore.

    Waiting for answers what indigojones666 is asking us ...

  20. #20
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.jorgemonedero.com/blog/in...hard-nicoll-2/
    the button is there - top right below the social icons. (you may have to refresh to view it for some reason)
    i wish to move that button (close-btn / return to index) to the bottom of the page so that is sits alongside artist name - publication, photo count.
    when i have tried changing the css the close button element is being obscured because it's hitting the edge of the containing div that has a class of "slider-image

  21. #21
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right click on the button, inspect element in fireforx and we see <div class="close-btn" title="Close">.
    this button is both close window and return to index

  22. #22
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by indigojones666 View Post
    http://www.jorgemonedero.com/blog/in...hard-nicoll-2/
    the button is there - top right below the social icons. (you may have to refresh to view it for some reason)
    On that page ... refreshed several times, emptied cache, visited source code and generated source code ...
    ... but still the button is not there (Firefox, Chrome) ...

    • Do you see the button in a preview of some webdesign program (or CMS), or real online?
    • And if you see the button online: which device (desktop, laptop, mobile)?
    • Which operation system?
    • Which browser, and which browser version?

    Ah, I see him!!!
    In Internet Explorer 11 under Windows 7. (then the css of post #16 should help)
    But not in Chrome, Firefox, Opera or Safari under Win-7.

    I suspect the AJAX-call is IE-only, but I'm not an AJAX expert.

  23. #23
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,229
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    There is definately something wonky going on. It seems like any deeper link doesn't show the close button (really a back to home) at first, refresh or otherwise.
    But if you go to http://www.jorgemonedero.com/blog/ and click on any image then it will be there.

    Tested using IE, Firefox, Opera, Chrome and Safari - Win 7 - same behavior for all of them.

    Seems to me the javascript bug should be worked out before getting after the CSS

  24. #24
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Odd; I am on mac looking on firefox, safari, chrome and opera and I can see the button.
    Also on PC firefox and internet explorer.
    Does anyone know how to move that button to the bottom alongside artist name without it being obscured because it's hitting the edge of the containing div that has a class of "slider-image"

  25. #25
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have just realised that the button only appears if one goes to http://www.jorgemonedero.com/blog/ first and then click on any of the photopgraphs (portfolios)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •