Would like to upload these two images as background images...

Discussion in 'JavaScript' started by qwikad.com, Apr 30, 2014.

  1. #1
    How would you upload these two images as background images?

    Javascript:
    defaultbuttons: {enable: true, moveby: 6, leftnav: ['images/arrow_left.png', 622, 100], rightnav: ['images/arrow_right.png', -22, 100]},
    Code (markup):
    If I put this in the CSS file:
    .arrow_left {
    background: url(images/arrow_left.png) no-repeat;
    border: none;
    width: 22px;
    height: 22px;
    }
    
    .arrow_right {
    background: url(images/arrow_right.png) no-repeat;
    border: none;
    width: 22px;
    height: 22px;
    }
    Code (markup):
    How can then I substitute images/arrow_left.png and images/arrow_right.png without breaking the javascript code? Is it even feasible?

    Thanks.
     
    qwikad.com, Apr 30, 2014 IP
  2. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #2
    That block of code does nothing but store value of data. It triggers when condition is met.
     
    ketting00, May 1, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Maybe I'm missing something, but what the **** are they even doing in the scripting in the first place?

    Admittedly, some JSON style object values leaves us NO CLUE WHATSOEVER what you are actually doing with them, and not knowing what element you are trying to put them on in the markup... it's effectively impossible to answer your question...

    Of course, why they are even separate images in the first place is a bit questionable too, since CSS-wise:

    .arrow_left,
    .arrow_right {
    	width: 22px;
    	height: 22px;
    	background: url(images/arrows.png) 0 0 no-repeat;
    }
    
    .arrow_right {
    	background-position:-22px 0;
    }
    Code (markup):
    Should be all you need, make the arrows one next-to the other in a single file so as to save a handshake.

    Really though, we need a hell of a lot more than you provided to even come close to a rational answer. You didn't provide the markup the CSS is targeting, or the actual Javascript code that DOES STUFF so...
     
    deathshadow, May 1, 2014 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,293
    Likes Received:
    1,698
    Best Answers:
    31
    Trophy Points:
    475
    #4
    Mr. deathshadow (that sounds kind of funny and cool at the same time) I don't need a lecture, I am just saying this off the bat, because, I am afraid you are going to tell me how I am wrong in everything I do and that my life is not worth living. All I need is a quick, practical solution (if available).

    On my site I have an image slider that has this code in it:

    
    <script type="text/javascript">
    
    stepcarousel.setup({
        galleryid: 'mygallery',
        beltclass: 'belt',
        panelclass: 'panel',
        autostep: {enable:false, moveby:6, pause:4000},
        panelbehavior: {speed:500, wraparound:false, wrapbehavior:'pushpull', persist:false},
        defaultbuttons: {enable: true, moveby: 6, leftnav: ['images/arrow_left.png', 622, 100], rightnav: ['images/arrow_right.png', -22, 100]},
        contenttype: ['inline']
    })
    
    </script>
    Code (markup):
    I didn't write it, so if you have an issue with it, I'd suggest contacting people at dynamicdrive.com telling them what a bunch of knuckle-heads they are (which they are not of course).

    You see how that images/arrow_left.png and images/arrow_right.png is in there just being called out of an image folder (stupid, stupid idea, they should all be fired and sent to the Guantanamo Bay detention camp to go through a javascript rehabilitation program, I am sure!).

    I want those two images to be loaded as background images. Something like <div class="arrow_left"> </div> and <div class="arrow_right"> </div>

    When I tried to put them there like so: defaultbuttons: {enable: true, moveby: 6, leftnav: ['<div class="arrow_left"> </div>', 622, 100], rightnav: ['<div class="arrow_right"> </div>', -22, 100]}, it didn't do the trick. I also tried to put them like this: <div class=\"arrow_left\"> </div> and like this: <div class=arrow_left> </div> still it would not load the images.

    Is there a way to make it work?
     
    qwikad.com, May 1, 2014 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Without seeing the SCRIPT that's actually processing that data element, we can't help you. ALL you are providing is the data fed to the SCRIPT, NOT what script is being run, what markup is being used, or what DOM elements are being built by the script. To borrow from someone who kind-of disappeared from these parts about a year ago -- ...and this is why we can't help you.

    Do you at least have a LINK to the steaming pile of scripttardery off Dynamic Drive? Or to the site you are working on? What you are showing for CSS and scripting is like trying to diagnose a problem with the USS IOWA through the eye of a needle.

    Though yes, most of the people contributing sloppy poorly written and disastrously outdated scripts to dynamic drive, much of which is garbage that has NO business on websites in the first place -- ARE a bunch of knuckle-heads. I wouldn't trust most of them to code their way out of a piss soaked paper bag with a hole in the bottom. I fell for their BS when I started out fifteen years ago; and it took me several years to realize what utter and complete halfwit garbage such nonsense -- again most of which has no business on websites in the first place -- actually is.

    Though I have to ask -- how do you know they aren't being called as background images by the script? Again, you aren't actually providing the SCRIPT BEING CALLED or the MARKUP the script is manipulating -- so we CAN'T TELL YOU HOW or even IF what you are asking for can be done, is already being done and you don't know it, or how to do it if you need it so! You're just showing us a DATA object, that doesn't tell us jack ****!

    Though I suspect you need to modify the ACTUAL script that PROCESSES that data object, NOT the data object -- NOT that setting it using the STYLE attribute or even from the scripting is the correct approach, but that's entirely what I've come to expect from off-the-shelf scripts slapped together any old way onto a website.
     
    Last edited: May 1, 2014
    deathshadow, May 1, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Actually, are you trying to use this steaming pile of jQuery-tard manure?

    http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

    If so... well there's your problem...

    Gimme a while and I'll toss together a much leaner and far more versatile replacement for it. (to the tune of probably a third the code and 100% style configurable from the CSS) -- hell, it probably won't even USE images unless you want it to. Got one project on the table first ahead of you, but when that's done I'll toss together something far, far simpler for you.
     
    Last edited: May 1, 2014
    deathshadow, May 1, 2014 IP
    qwikad.com likes this.
  7. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #7
    I guess here's is the script: http://qwikad.com/stepcarousel.js

    And I guess you can't. JavaScript will override CSS, unless you edit the script. Why they put CSS in the script I wonder.
     
    ketting00, May 1, 2014 IP
  8. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,293
    Likes Received:
    1,698
    Best Answers:
    31
    Trophy Points:
    475
    #8


    Yes, that's the one.
     
    qwikad.com, May 1, 2014 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    I'll probably have it tomorrow -- I just had a 'emergency' come in the door... and some swag.
     
    deathshadow, May 1, 2014 IP