We Keep Coding

Make twitter widget same height as DIV

i'm trying to make my twitter widget (which is in its own div) the same height as another div (called mainslider). I've tried some stuff with JavaScript and JQuery but i'm not too experience with this.
An extract of my code is below:
<div class="mainslider" id="mainsliderid">
(SLIDER CODE HERE THAT I REMOVED)
</div>
<script>
var twitterheight = $('mainsliderid').height();
</script>
<div class="maintwitter">
<a class="twitter-timeline" href="https://twitter.com/twitter" data-widget-id="704258053198254080" height="twitterheight" width="100%">Tweets by #twitter</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");
</script>
</div>

So i solved the problem myself, and it was really simple.
Due to the nature of the slideshow i had, its height was set proportionally to its width. Because i am using proportions of the screen width to change both the twitter and slideshows width i could just use the unit 'VW' which is 1 % of the screen width and just had to multiply it by the correct value. Works fine now.

Content After Slider Is Overwriting Slider. Why?

I am working on a slider that is working perfectly but the problem is that the content of web-page after the slider is overwriting on slider's 2-3 slides. I don't want to fix the height of slider but also want to show after slider content after every slides of slider. The code is shared below.
<script type="text/javascript">
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
imgs = d.getElementById("gallery").getElementsByTagName("li");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,3000);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
</script>
<style type="text/css">
#slider {max-height:700px;background:url(https://lh6.googleusercontent.com/-LLFEz-EyGbk/UyV9SbGPuhI/AAAAAAAAMgY/JNqf8X11dbk/s220/slider-loader.gif) #2e2e2e no-repeat 50% 50%;}
#gallery {padding:0;position:relative;margin:0 auto;max-width:1920px;}
#gallery li {list-style-type:none;width:100%;display:none;position:absolute;top:0;left:0;}
.gallery_img img {max-width:100%;}
.gallery_text {width:100%;margin:0 auto;text-align:center;position:absolute;top:-20%;left:0%;}
.gallery_text h2 {padding:0;line-height:70px;font-size:50px;font-weight:inherit;color:#fff;}
.gallery_text p {margin:20px 0;line-height:24px;font-size:20px;color:#ffee66;}
.gallery_text a {background:#77aa00;display:inline-block;padding:20px 70px;font-size:18px;font-weight:700;text-transform:uppercase;color:#fff;text-decoration:none;}
.gallery_text a:hover {background:#fff;color:#000;}
</style>
This Is The DIV Or Text Before The Slider.
<div class='clear'/>
<div id='slider'>
<ul id='gallery'>
<li style='position:relative!important;'>
<div class='gallery_img'><img alt='Google' src='https://lh4.googleusercontent.com/-Nh50j1-Bqws/UyV9Pv_wd3I/AAAAAAAAMf8/nsYUnwm35Gs/s1920/slide_1.jpg' title='Google'/></div>
<div class='gallery_text'><h2>Google</h2><p>Google is an American multinational corporation specializing in Internet-related services and products.</p><a href='http://www.google.com'>Open Google</a></div>
</li>
<li>
<div class='gallery_img'><img alt='Bing' src='https://lh4.googleusercontent.com/-eGrPYj9dz1c/UyV9QgDIh5I/AAAAAAAAMgM/mlcDdyufQJs/s1920/slide_2.jpg' title='Bing'/></div>
<div class='gallery_text'><h2>Bing</h2><p>Bing is a search engine that brings together the best of search and people in your social networks to help you spend less time searching and more time doing.</p><a href='http://www.bing.com'>Open Bing</a></div>
</li>
<li>
<div class='gallery_img'><img alt='Yahoo' src='https://lh6.googleusercontent.com/-L_s8vxgupPY/UyV9RKToZeI/AAAAAAAAMgQ/TWs-wy7lbrk/s1920/slide_3.jpg' title='Yahoo'/></div>
<div class='gallery_text'><h2>Yahoo</h2><p>Yahoo! Inc. is an American multinational Internet corporation headquartered in Sunnyvale, California.</p><a href='http://www.yahoo.com'>Open Yahoo</a></div>
</li>
</ul>
</div>
<div class='clear'/>
This Is The DIV Or Text After The Slider.
You can also see the live FIDDLE with error...

I think I've found the problem. You're trying to dynamically adjust the CSS display property of the <li> elements, alternating between block and none. But I don't think that's the right approach. All of the list item elements should be displayed and have display:block; at all times. The desired positioning can be achieved by setting the first <li> to position:static; (meaning it will be embedded in the graphical flow of the page), and all remaining <li> elements should be set to position:absolute; (meaning they will positionally "collapse" up to their parent container, thus causing them to sit snugly on top of the first <li>). To ensure only one <li> is visible at all times, it's enough to weaken the opacity of the others down to zero.
Thus, I made the following changes to your code:
Changed the first <li> from <li style='position:relative!important;'> to <li style="position:static;">.
Changed the display property of the #gallery li rule to block.
Commented out the 3 JS lines where you're messing with the .style.display property of <li> nodes.
Moved the definition of the setOpacity() function out of the so_xfade() function so that it will be stored at window.setOpacity and thus it will be accessible from all scopes (necessary for change #5).
Added the line for(i=0;i<imgs.length;i++) setOpacity(imgs[i]); to so_init() just after the line imgs[0].xOpacity = .99; to ensure that the opacities of all <li> elements are properly initialized.
I haven't used jsfiddle before, so I'm not sure if I did this right, but I clicked the "Update" button in the top menu bar and that dropped me into http://jsfiddle.net/yyathnom/2/, so I think you can use that to see my changes. Let me know if it works the way you want.
Edit: Sorry, I didn't realize each slide needed link functionality. For link functionality the current slide needs to be not just visible, but at the front of the stack. This can be accomplished with z-index.
A complication is that z-index does not apply to statically-positioned elements, but that can easily be overcome by changing the position:static property to position:relative for the first list item (which is actually what you had originally!). Relatively positioned elements are still in-flow, they can just be moved and have their z-index set.
Another complication is that z-index interacts strangely with opacity; the final "computed" opacity seems to take into account both the opacity CSS style and the z-index. So an image with 50% opacity on top of another image with 50% will result in a different appearance if you swap the z-indexes of the two images, even leaving both opacities at 50%. I originally tried to swap the z-indexes when the two images were at approximately equal (50%) opacities, but the visual jerk was undesirable, so I ended up just changing the z-index at the end, at opacity zero.
So, made the following additional changes:
Added two global conceptual constants, ZINDEX_UNDERNEATH (1) and ZINDEX_CURRENTSLIDE (100). Larger z-indexes mean "more in front" and smaller mean "further back" within the stacking context.
Added initialization imgs[i].style.zIndex = ZINDEX_UNDERNEATH; for all but the first <li>, and imgs[0].style.zIndex = ZINDEX_CURRENTSLIDE; for the first <li>.
Added the following two lines to set the new current slide to the visible z-index, just before current is reassigned:
imgs[current].style.zIndex = ZINDEX_UNDERNEATH;
imgs[nIndex].style.zIndex = ZINDEX_CURRENTSLIDE;
Result: http://jsfiddle.net/yyathnom/3/
Edit: To provide more detail on the original issue, it was caused by the fact that 2 of the 3 <li> elements had position:absolute, which means they were not in-flow, and although the first <li> had position:relative, meaning it was in-flow (but relatively movable), the code was regularly disabling it with display:none. Any element that is not in-flow will effectively have no "mass", meaning it won't push the following elements below it, but will instead let them "collapse up" to where it would have been positioned if it had been in-flow. Thus, when the first <li> was being set to display:none (which was when the other 2 <li>s were being displayed), there was no in-flow element there to keep the text following the slideshow images beneath the images, and so it collapsed up to the flow position of the images.

Div height to animate smoothly to its new height after portfolio is sorted

I am in the midst of making my portfolio template but I am completely not familiar with JS, jquery and CSS transitions. Got this ( http://pixellytrain.com/sortportfolio/index.html) up and running through different tutorials. I would like to make the .blue div slide/ease nicely to the new height of the .red div after the portfolio is sorted (e.g. from "all" to "cat a").
Something like how the footer of this portfolio: http://hogash-demo.com/kallyas_wp/features/portfolio/sortable-layout/ slide in nicely when the portfolio become shorter.
Due to the portfolio tutorial on Queness, I already have got jquery, mixitup.js and easing.js linked to the page.
I tried this randomly but it was doing nothing so I am not sure how to get going or whether I am even on the right track. Thank you to all you kind-hearted pros in advance!!
$('.filter').click(function () {
$('.red').slideToggle('8000', "easeOutBounce", function () {
});
});

http://jsfiddle.net/XY2Ju/
Here is a working implementation. Enjoy!
0) Create something that wraps everything inside .red.
<div class="red">
<div class="wrapper">
<all the stuff that makes your portfolio>
</div>
</div>
Notice that the wrapper needs overflow: hidden; in it's css.
1) When the filter is clicked, get .red's current height and set red's height to it, then it won't jump around.
$('.red').height($('.wrapper').height());
// The portfolio moves around
2) After the animation of the items is complete, set .red to animate() to the same height as the wrapper.
$('.red').animate({'height': $('.wrapper').height()}, 250);

CSS3 timed animation of background image

I am pretty new to CSS and HTML, but I am learning the ropes. Right now, I have a background image on my header section and I am trying to turn this into a slideshow with 3-4 images shuffling through on a timer.
I have seen some tutorials that use images through HTML, but the way I have set it up is I have my CSS property background-image set as my image.
If this doesnt make sense, here is the CSS
.global-header {
min-height:600px;
background-image: url("Assets/BGImages/head_sandwichman.jpg");
background-size: cover;
text-align: center;
and the HTML
<header class="container global-header">
<div class="inner-w">
<div class='rmm' data-menu-style = "minimal">
<ul>
<li>HOME</li>
<li>MENU</li>
<li>FIND US</li>
<li>ABOUT</li>
</ul>
</div>
<div class="large-logo-wrap">
<img src="Assets/Logos/Giadaslogoindexwhitebig.png" />
</div>
</div>
Thanks for the help!

Use following
<script>
//Here use Array of images ,which you want to show, Use path you want.
var images=new Array('Assets/BGImages/head_sandwichman1.jpg','Assets/BGImages/head_sandwichman2.jpg','Assets/BGImages/head_sandwichman3.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if(nextimage>=images.length)
nextimage=0;
$('.global-header').css('background-image','url("'+images[nextimage++]+'")').fadeIn(500,function(){setTimeout(doSlideshow,1000);});
}
</script>

You would not be using HTML and CSS for carousel. While some cool experiments are out there I would shy away from using that on a production site. You will most likely be using jQuery. If you are new to front-end development and want to set up the slider and move on to the rest of your project, I'd recommend using a plugin.
Here is a popular jQuery plugin you can use: http://dev7studios.com/plugins/nivo-slider/
If you want to learn how to create your own, try following a tutorial that creates a similar slider. Then try playing around with the code to get it to the exact state you want.
Here's a an example of said tutorial: http://paulmason.name/item/simple-jquery-carousel-slider-tutorial

I think depending on the animation you are doing depends on the technique you could use.
if you are sliding the images you could use CSS3 animations to slide between the images. But this means you would have to make one large image that contains all your images and you change the background image position on a cycle.
This might be of some help:
http://designshack.net/articles/css/infinitephotobanner/
or you could try setting different background classes and implementing a change of class on a timer using this:
$(document).ready(function(){
var seconds = 5000; // set in milliseconds
var step = 1; // place to start
var limit = 3; //limit of background images (remember that 0 is the start so 3 is for 4 background images)
$(".global-header").addClass("banner"+step).fadeIn(1000);
setInterval(function(){
$(".global-header").fadeOut(500,function(){
$(this).removeClass("banner"+step);
step = (step > limit) ? 1 : step + 1;
$(".global-header").addClass("banner"+step).fadeIn(1000);
});
},seconds);
});
And then use different class's for the background image. (I used .banner in this instance):
.banner1{
background:url(../images/something.jpg);
}
.banner2{
background:url(../images/somethingElse.jpg);
}
.banner3{
background:url(../images/soemthingElseAgain.jpg);
}
you can experiement with the different range of J-query effects, I used fadeIn for simplicity.
Hope this helps.

Set slideshow width according to the screen

My slideshow's working correctly in every aspect except the fact that it's a total failure when it comes to adjusting to different screen sizes.
It works like it should on my big screen, but on my other one it doesn't adapt and adds a horizontal scroller.
I added width 100% to it but as I've found out the right way to do this is by a javascript code that adjusts everything dynamically. The problem is, I've never had any prior experience doing this and don't know where to begin. My page has jQuery loaded by the way.
This is the sample structure of slideshow:
<div class="featured-image">
<div style="overflow: hidden;height: 450px;"><img width="1950px" height="" alt="4" src="image.jpg"></div>
<!-- end .featured-price -->
</div>
I suppose a jQuery script to target '.featured-image img' dynamically and add the width and height to it would be the way to do this. Is there any way better than that or a simpler script? Any help is appreciated.

var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
If you need it to adjust dynamically then you'll need to capture the resize event:
$(window).resize(function() {
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
});