dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: javascript bootstrap question - Beginner

  1. #1
    Join Date
    Dec 2013
    Posts
    57

    Question javascript bootstrap question - Beginner

    I recently downloaded a bootstrap template so I can create an e-commerce site. I want to know is the javascript that came with the template useful. Don't I need to create a new javascript for my website.

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,591
    IDK, the crystal ball is in the shop being repaired so I can't tell you, nor can anyone else as a matter of fact because you have not posted any code so no one will be the wiser for it.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Dec 2013
    Posts
    57
    Quote Originally Posted by \\.\ View Post
    IDK, the crystal ball is in the shop being repaired so I can't tell you, nor can anyone else as a matter of fact because you have not posted any code so no one will be the wiser for it.
    Sorry about that, how can I upload the .js file though. It is to long put here.
    Should I just put a sample of it?

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,591
    You use the forum CODE tags and the website does the rest.

    If its a really big script then you would upload a copy to the website and it would appear as a link but you are really better off posting in the forum with code tags.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Dec 2013
    Posts
    57
    Code:
    if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
    
    +function ($) { "use strict";
    
      // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
    
      function transitionEnd() {
        var el = document.createElement('bootstrap')
    
        var transEndEventNames = {
          'WebkitTransition' : 'webkitTransitionEnd'
        , 'MozTransition'    : 'transitionend'
        , 'OTransition'      : 'oTransitionEnd otransitionend'
        , 'transition'       : 'transitionend'
        }
    
        for (var name in transEndEventNames) {
          if (el.style[name] !== undefined) {
            return { end: transEndEventNames[name] }
          }
        }
      }
    
      // http://blog.alexmaccaw.com/css-transitions
      $.fn.emulateTransitionEnd = function (duration) {
        var called = false, $el = this
        $(this).one($.support.transition.end, function () { called = true })
        var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
        setTimeout(callback, duration)
        return this
      }
    
      $(function () {
        $.support.transition = transitionEnd()
      })
    
    }(window.jQuery);
    
    /* ========================================================================
     * Bootstrap: alert.js v3.0.0
     * http://twbs.github.com/bootstrap/javascript.html#alerts
    
    
    +function ($) { "use strict";
    
      // ALERT CLASS DEFINITION
      // ======================
    
      var dismiss = '[data-dismiss="alert"]'
      var Alert   = function (el) {
        $(el).on('click', dismiss, this.close)
      }
    
      Alert.prototype.close = function (e) {
        var $this    = $(this)
        var selector = $this.attr('data-target')
    
        if (!selector) {
          selector = $this.attr('href')
          selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }
    
        var $parent = $(selector)
    
        if (e) e.preventDefault()
    
        if (!$parent.length) {
          $parent = $this.hasClass('alert') ? $this : $this.parent()
        }
    
        $parent.trigger(e = $.Event('close.bs.alert'))
    
        if (e.isDefaultPrevented()) return
    
        $parent.removeClass('in')
    
        function removeElement() {
          $parent.trigger('closed.bs.alert').remove()
        }
    
        $.support.transition && $parent.hasClass('fade') ?
          $parent
            .one($.support.transition.end, removeElement)
            .emulateTransitionEnd(150) :
          removeElement()
      }
    
    
      // ALERT PLUGIN DEFINITION
      // =======================
    
      var old = $.fn.alert
    
      $.fn.alert = function (option) {
        return this.each(function () {
          var $this = $(this)
          var data  = $this.data('bs.alert')
    
          if (!data) $this.data('bs.alert', (data = new Alert(this)))
          if (typeof option == 'string') data[option].call($this)
        })
      }
    
      $.fn.alert.Constructor = Alert
    
    
      // ALERT NO CONFLICT
      // =================
    
      $.fn.alert.noConflict = function () {
        $.fn.alert = old
        return this
      }
    
    
      // ALERT DATA-API
      // ==============
    
      $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
    
    }(window.jQuery);
    
    
    
    
    +function ($) { "use strict";
    
      // BUTTON PUBLIC CLASS DEFINITION
      // ==============================
    
      var Button = function (element, options) {
        this.$element = $(element)
        this.options  = $.extend({}, Button.DEFAULTS, options)
      }
    
      Button.DEFAULTS = {
        loadingText: 'loading...'
      }
    
      Button.prototype.setState = function (state) {
        var d    = 'disabled'
        var $el  = this.$element
        var val  = $el.is('input') ? 'val' : 'html'
        var data = $el.data()
    
        state = state + 'Text'
    
        if (!data.resetText) $el.data('resetText', $el[val]())
    
        $el[val](data[state] || this.options[state])
    
        // push to event loop to allow forms to submit
        setTimeout(function () {
          state == 'loadingText' ?
            $el.addClass(d).attr(d, d) :
            $el.removeClass(d).removeAttr(d);
        }, 0)
      }
    
      Button.prototype.toggle = function () {
        var $parent = this.$element.closest('[data-toggle="buttons"]')
    
        if ($parent.length) {
          var $input = this.$element.find('input')
            .prop('checked', !this.$element.hasClass('active'))
            .trigger('change')
          if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
        }
    
        this.$element.toggleClass('active')
      }
    
    
      // BUTTON PLUGIN DEFINITION
      // ========================
    
      var old = $.fn.button
    
      $.fn.button = function (option) {
        return this.each(function () {
          var $this   = $(this)
          var data    = $this.data('bs.button')
          var options = typeof option == 'object' && option
    
          if (!data) $this.data('bs.button', (data = new Button(this, options)))
    
          if (option == 'toggle') data.toggle()
          else if (option) data.setState(option)
        })
      }
    
      $.fn.button.Constructor = Button
    
    
      // BUTTON NO CONFLICT
      // ==================
    
      $.fn.button.noConflict = function () {
        $.fn.button = old
        return this
      }
    
    
      // BUTTON DATA-API
      // ===============
    
      $(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
        var $btn = $(e.target)
        if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
        $btn.button('toggle')
        e.preventDefault()
      })
    
    }(window.jQuery);
    
    +function ($) { "use strict";
    
      // CAROUSEL CLASS DEFINITION
      // =========================
    
      var Carousel = function (element, options) {
        this.$element    = $(element)
        this.$indicators = this.$element.find('.carousel-indicators')
        this.options     = options
        this.paused      =
        this.sliding     =
        this.interval    =
        this.$active     =
        this.$items      = null
    
        this.options.pause == 'hover' && this.$element
          .on('mouseenter', $.proxy(this.pause, this))
          .on('mouseleave', $.proxy(this.cycle, this))
      }
    
      Carousel.DEFAULTS = {
        interval: 5000
      , pause: 'hover'
      , wrap: true
      }
    
      Carousel.prototype.cycle =  function (e) {
        e || (this.paused = false)
    
        this.interval && clearInterval(this.interval)
    
        this.options.interval
          && !this.paused
          && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles