Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About Shockowaffel

  • Rank
  1. The JS examples and the tutorial are neat, but what's really missing is an example of how to modify some of the examples Something simple like: you want to use two instances of an image slider from the tutorial Can you still use the same JS script ? If not, what options are there to fix it ? Hints to maybe Jquery as alternative solutions or whatever comes to mind.
  2. Thanks for the help, I finally figured it out ! .navbar-inverse .navbar-nav>.home>a { background-color: transparent !important; color:#9d9d9d !important; } .navbar-inverse .navbar-nav>.home>a:hover { color:#fff !important; }
  3. Ah I get it! Thanks. This actually does it .nav li a {background-color:transparent !important; } This works and overrides the js. Sadly (and as expected) it also overrides all other navbar item backgrounds. As mentioned before, I'd like to only override the home button. Any idea on how to limit this effect to only one element instead of all ?
  4. I feel stupid, but I do not understand what you are suggesting. I have an idea what you mean, but what I am trying isnt working. sth like #homebutton {background-color: transparent;} or the same as an inline style isnt working either.
  5. So I THINK this is the JS part we need, but as I said, I am not good enough with JS to do anything with this really. I assume the parts that mention ".nav li > a" or "a" links in general are relevant. }(jQuery), + function (t) { 'use strict'; function e(s, i) { this.$body = t(document.body), this.$scrollElement = t(t(s).is(document.body) ? window : s), this.options = t.extend({ }, e.DEFAULTS, i), this.selector = (this.options.target || '') + ' .nav li > a', this.offsets = [ ], this.targets = [ ], this.activeTarget = null, this.scrollHeight = 0, this.$scrollElement.on('scroll.bs.scrollspy', t.proxy(this.process, this)), this.refresh(), this.process() } function s(s) { return this.each(function () { var i = t(this), n = i.data('bs.scrollspy'), a = 'object' == typeof s && s; n || i.data('bs.scrollspy', n = new e(this, a)), 'string' == typeof s && n[s]() }) } e.VERSION = '3.3.7', e.DEFAULTS = { offset: 10 }, e.prototype.getScrollHeight = function () { return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight) }, e.prototype.refresh = function () { var e = this, s = 'offset', i = 0; this.offsets = [ ], this.targets = [ ], this.scrollHeight = this.getScrollHeight(), t.isWindow(this.$scrollElement[0]) || (s = 'position', i = this.$scrollElement.scrollTop()), this.$body.find(this.selector).map(function () { var e = t(this), n = e.data('target') || e.attr('href'), a = /^#./.test(n) && t(n); return a && a.length && a.is(':visible') && [ [a[s]().top + i, n] ] || null }).sort(function (t, e) { return t[0] - e[0] }).each(function () { e.offsets.push(this[0]), e.targets.push(this[1]) }) }, e.prototype.process = function () { var t, e = this.$scrollElement.scrollTop() + this.options.offset, s = this.getScrollHeight(), i = this.options.offset + s - this.$scrollElement.height(), n = this.offsets, a = this.targets, o = this.activeTarget; if (this.scrollHeight != s && this.refresh(), e >= i) return o != (t = a[a.length - 1]) && this.activate(t); if (o && e < n[0]) return this.activeTarget = null, this.clear(); for (t = n.length; t--; ) o != a[t] && e >= n[t] && (void 0 === n[t + 1] || e < n[t + 1]) && this.activate(a[t]) }, e.prototype.activate = function (e) { this.activeTarget = e, this.clear(); var s = this.selector + '[data-target="' + e + '"],' + this.selector + '[href="' + e + '"]', i = t(s).parents('li').addClass('active'); i.parent('.dropdown-menu').length && (i = i.closest('li.dropdown').addClass('active')), i.trigger('activate.bs.scrollspy') }, e.prototype.clear = function () { t(this.selector).parentsUntil(this.options.target, '.active').removeClass('active') }; var i = t.fn.scrollspy; t.fn.scrollspy = s, t.fn.scrollspy.Constructor = e, t.fn.scrollspy.noConflict = function () { return t.fn.scrollspy = i, this }, t(window).on('load.bs.scrollspy.data-api', function () { t('[data-spy="scroll"]').each(function () { var e = t(this); s.call(e, e.data()) }) }) }(jQuery);
  6. That would be for the li items. problem there is that putting a non li item inside a ul or in front of it would mess up the layout, wouldnt it ? The navbar items are centered on the page right now.
  7. Hi, I am no good with Javascript but I managed to copy paste my way to a working implementation of scrollspy to highlight my active navbar items. So far so good Now, the very first list item is the Home button and of course it gets highlighted when you are at the top of the page. I would prefer if the home button would not be highlighted tough. I want a visually inactive navbar when I am at the top of the page. Is there a script to do this or another way I am not seeing ? <body data-spy="scroll" data-target=".navbar" data-offset="500"> <!-- Navbar (sit on top) --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid "> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand brand w3-wide" href="#home">THORSTEN ERDT</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="home w3-hide"><a href="#home"> HOME</a></li> <li><a href="#about"><i class="fa fa-user"></i> ABOUT</a></li> <li><a href="#portfolio"><i class="fa fa-th"></i> PORTFOLIO</a></li> <li><a href="#contact"><i class="fa fa-envelope"></i> CONTACT</a></li> </ul> </div> </div> </div> </nav>
  8. So, I experimented around some more and it seems the "solution" I am ok with right now is to add padding on the left side of the text equal to the letter spacing to accomodate for the excess space on the right. Ingolme's suggestion to fix the right side padding only works when you have enough space to work with. If you have a case like this where your padding (0.5em) is smaller than the letter spacing (0.625em), reducing the padding by the value of the spacing would leave you with a negative value for padding and as far as I know, that doesnt work, does it ? So I have to compromise on my design and add padding on the left to fix this imbalance. And I noticed this issue also affects the general centered positioning of Text. That means when you have text with large spacing and you want it to be centered, you need to add padding on the left equal to the letter spacing. Otherwise you get this on small screens:
  9. Thank you, to check for what you said, I removed the w3-wide padding and added an inline padding to the first h1 (dont mind the high value) <div class="bgimg-1 w3-display-container w3-opacity-min" id="home"> <div class="w3-display-middle w3 mobile"> <h1 class="w3-black w3-padding-large w3-animate-opacity" style="padding-left: 5.5em">THORSTEN ERDT</h1> <h1 class="headline2 w3-animate-opacity">ILLUSTRATION</h1> </div> </div> Here's the result: While it got rid of the excess space (and all letter spacing at that) for some reason the padding doesnt seem to affect it at all. Also, if I remove the w3-black class and try to add a css style for background-color:"black" on h1 nothing happens either. The css wouldnt add a black background, only the w3-black does. I am starting to get the impression that the w3-display-container is preventing css styling beyond font, fontsize and spacing or something like that. Now, were I to remove the w3-padding large class, the inline padding would actually be applied for some reason. (not the image)
  10. I have some knowledge about html and css and I am confident in beeing able to hack through most problems through trial and error, but in this case I dont even have an idea on how to fix it and I am afraid it's really simple. So I simply want this black background behind the text and it's supposed to be equal on both sides, but the padding starts virtually too late for that to work. body {position: relative;} body,html,h1,h2,h3,h4,h5,h6,p {font-family: "Lato", sans-serif;} body, html { height: 100%; color: #777777; line-height: 1.8;} html {font-size:1rem;} body {font-size:100%;} h1 {font-size: 1.777em; text-align: center; color: white;} .headline2 {letter-spacing: 0.8em;} .w3-wide {letter-spacing: 0.625em;} <div class="bgimg-1 w3-display-container w3-opacity-min" id="home"> <div class="w3-display-middle"> <h1><span class="w3-black w3-padding-large w3-wide w3-animate-opacity">THORSTEN ERDT</span></h1> <h1><span class="headline2 w3-animate-opacity">ILLUSTRATION</span></h1> </div> </div>
  • Create New...