Mad_Griffith

Apparently the widget only gets the tweets from the past 7 days. No older tweet is retrieved.

Any way to work around this?

Hi, does any of you have experience with Twitter widgets, in particular to setup a query of a hashtag from a specific account?

Something like this...

#hashtag from:@account include:retweets

... just gets me an empty feed. When clicking on "Check for tweets" I actually can see the correct tweets' list!

No errors logged in the console either...

The idea behind CSS is that the more specific selector takes precedence. It's not a hack because that's exactly how CSS is meant to function.

• The more components there are in a selector, the more specific it is.
• A selector with an ID in it takes precedence over any selector without an ID.

A selector "div.myClass" is more specific than ".myClass". The selector "element > .className" is more specific than "element .className"

 

Anything is better and less hackish than using !important, since the !important modifier deliberately breaks the CSS rules.

Yeah well I said it sounds hackish because it is not intuitive for me.

Sounds hackish to me. I'd rather stick with the !Important keyword.

What I am actually trying to achieve is ".button" having higher precedence

I add: ".button" is an anchor link as well and is placed in an "odd" div as well.

Yeah, it would not work without "!important". But I find it strange that in this case, apparently, is the number of selectors (the first declaration has 3 selectors vs 2 of the second one) to prevail and not the specificity (the second declaration is more specific than the first one)

    .myClass > div:nth-of-type(odd) a {       color: white;     }     .myClass .button {       color: white !important;     }

".button" is an anchor link as well and is placed in an "odd" div as well.

You need to study this:http://www.w3schools.com/js/js_functions.asp

total_width = this.allSlides(element, total_width);

ok, didn't think of assigning it. Thanks, I am replacing the "this.allSlides(element, total_width)" with it.

Uhm, so what should the code rather be like? Nothing comes to my mind.

When you call the allSlides function you're not doing anything with the return value.

what do you mean? I am assigning it to this.slider.width. What should it be like?

Thanks for the other tip, didn't really notice! I took it out of the loop.

Hi, one issue with returning values... can you explain how to workaround this scoping problem?

var Slideshow = function(element) {  element = document.querySelectorAll(element)[0];  var total_width = 0; // let's initialize it to 0  this.allSlides(element, total_width);   this.slider.width = total_width;  // It should be 550, no? It's still 0 instead. Why?};Slideshow.prototype.allSlides = function(element, total_width) {  var that = this;  that.slide = element.querySelectorAll('.slide');  for (i = 0; i < that.slide.length; i++) {    total_width = total_width + outerWidth(that.slide[i]);    return total_width; // it's 550 now  }};

cool thanks!

I was trying (and hopefully it will work):

if(jQuerytargetItem !== null) {// some code}

But if that ends up not working I will follow your advice!

Hi, I am stuck at a point of converting jQuery's next() and prev() to JS.

Something like this

var jQuerytargetItem = this.slider.find('.active').next()

could be done like this

var jQuerytargetItem = this.slider.getElementsByClassName('active')[0].nextElementSibling

But then somewhere else I have to perform this:

if(jQuerytargetItem.length) {// some code}

and nextElementSibling doesn't have a length property...

How can I workaround this?

Also, why if I try to access the property by logging "this.total_width", I would get "NaN" though it is set to the number 0?

That's the thing, there's nothing surrounding the code. Could it be anything else?

Thanks!

I am converting it now and there are a couple of things I don't understand.

e.g. I have this code:

var Slideshow = function(element) {    var element = document.getElementById(element);    this.total_width = 0;    this.slide = element.getElementsByClassName('slide');}var speakers = new Slideshow('speakers');

• if I call the object "speakers" in the console, I get "undefined". Why so?
• If I call the object "speakers.slide" in the console, I get the uncaught error that property "slide" is undefined. Why so?
• if I try to access the property by logging "this.total_width", I would get "NaN" though it is set to the number 0. How come?
• If total_width was just a variable ("var total_width" instead of "this.total_width"), how would I access it?

Thanks!

Thanks. It's on my schedule.

Also, I don't get when one should prefer writing methods or writing functions (apart from the case where you are writing functions which are blatantly "helpers" and shouldn't be methods of the objects as such), and when one should be prefer properties over variables.

Hi everybody! I just made this slider in an object oriented fashion. I would like to know how I can improve the script. Thank you!

  var Slideshow = function(element) {   var totalWidth = 0;   this.slider_wrap = element.find('.slider_wrap');   this.slider = element.find('.slider');   this.slide = element.find('.slide');   this.first_slide = element.find('.slide:first');   this.slider_controls_prev = element.find('.slider_controls_prev');   this.slider_controls_next = element.find('.slider_controls_next');   this.all_slides = this.slide.each(function(){    totalWidth = totalWidth + jQuery(this).outerWidth(true);  });   this.maxScrollPosition = totalWidth - this.slider_wrap.outerWidth();   this.toSliderItem = function(jQuerytargetItem){     if(jQuerytargetItem.length){       this.newPosition = jQuerytargetItem.position().left;       if(this.newPosition <= this.maxScrollPosition){                  jQuerytargetItem.addClass('active');         jQuerytargetItem.siblings().removeClass('active');         this.slider.animate({           left : - this.newPosition         });       } else {         this.slider.animate({          left : - this.maxScrollPosition        });       };     };   };   this.slider.width(totalWidth);   this.first_slide.addClass('active');   this.buttons(); } Slideshow.prototype.buttons = function() {  var that = this;  this.slider_controls_prev.click(function() {    var jQuerytargetItem = that.slider.find('.active').prev();    that.toSliderItem(jQuerytargetItem);  });    this.slider_controls_next.click(function() {    var jQuerytargetItem = that.slider.find('.active').next();    that.toSliderItem(jQuerytargetItem);  });}var speakers = new Slideshow(jQuery('.slider-1'));});

The HTML:

<div class="slider_wrap"> <div class="slider clearfix">   <div class="slide">Slide Content</div> </div> <div class="slider_controls clearfix">   <div href="#" class="slider_controls_prev">     ◄   </div>   <div href="#" class="slider_controls_next">     ►   </div> </div></div>