We Keep Coding

How to add <li> to your image slider - JavaScript

Im working with slider in CMS. It fits screens height, but I have problem with my images scaling down. Is there any CSS solution that I could add to img{} to make it not scale? Or I wonder if there is any javascript solution to add <li> to your slider div > ul and make it as background and still make it run as normal as if image is coming from CMS itself?
I have this:
<div id=imageSlider>
<ul class="hs_cos_flex-slides-main">
/* here <li> goes but I would like to place it my self if possible*/
</ul>
<div>
I tried something like this
$("#imageSlider ul").append('<li></li>');
but don't know exactly how to fix it.
This is javascript run from CMS for slider
<script>
window.hsSliderConfig = window.hsSliderConfig || {};
window.hsSliderConfig['module_1489510806896497'] = {
mode: 'slider',
mainConfig: {"animationLoop":true,"direction":"horizontal","slideshowSpeed":5000.0,"controlNav":true,"smoothHeight":false,"namespace":"hs_cos_flex-","slideshow":true,"selector":".hs_cos_flex-slides > li","animation":"slide"}
};
</script>

Resizing Cycle2 with javascript is making things jittery

I have a Cycle2 slideshow that I want to dynamically resize on its own when the window width is above 580px. At 580px and less, I want it to take up the height of the screen, minus the header and pager.
Here is my markup:
<div class="header-container">
<div class="header"></div>
</div>
<div class="slideshow-container">
<div class="cycle-slideshow" data-cycle-auto-height="24:13" data-cycle-slides="> .slide-container" data-cycle-timeout=4000 data-cycle-pager=".pager" data-cycle-pager-template="blah blah blah">
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<div class="slide-container" style="background-image:url(yada/yada);"></div>
<div class="slide-container" style="background-image:url(yada/yada/yada);"></div>
</div>
</div>
<div class="pager-container">
<div class="pager"></div>
</div>
I have tried the following code:
//resize the slideshow to fit height of screen on mobile
if($(window).width() < 581){
$('.cycle-slideshow').css('height',$(window).height() - $('.header-container').height() - $('.pager-container').height());
}else{
$('.cycle-slideshow').css('height',$('.cycle-slideshow').height());
}
Which works fairly well, but at 580px and narrower, the slideshow is jittery when resizing the window because Cycle2 is constantly trying to insert it's own height.
My second solution is to set the height of .slideshow-container and add and remove the .mobile-slideshow class depending on if the window is less than 581px or not:
//resize the slideshow to fit height of screen on mobile
if($(window).width() < 581){
$('.cycle-slideshow').addClass('mobile-slideshow');
$('.slideshow-container').css('height',$(window).height() - $('.header-container').height() - $('.pager-container').height());
}else{
$('.cycle-slideshow').removeClass('mobile-slideshow');
$('.cycle-slideshow').css('height',$('.cycle-slideshow').height());
}
.mobile-slideshow has a height of 100% !important in mobile view only.
This works fairly well too, except the height of the slideshow is jittery above 580px because .mobile-slideshow is constantly trying to readjust to 100% of the container's height.
Is there a better way to do this? I'm trying to keep this functionality as simple as possible, but the jitteryness that comes with resizing elements with javascript is making it a hassle.
UPDATE:
Okay, some of you asked for a jsFiddle to demo what's going on: JsFiddle
As you can see, when the window is over 580px wide, Cycle2 resizes it based on the data-cycle-auto-height attribute. When it is under 580px, the JQuery script determines the height, but as you shrink or expand the window, it jumps back and forth between Cycle2's auto height and the JQuery scripts calculated height.

Finally found a solution. See the working fiddle http://jsfiddle.net/6azbw8re/4/
Modify your resize() function to following,
function resize(){
if($(window).width() < 581){
$('.header').html('JQuery script is determinging the height');
var newHeight = $(window).height() - $('.header-container').height() - $('.pager-container').height();
$('#cycle-slideshow').addClass("change-height");
$('head').append('<style> .change-height{ height:'+ newHeight+'px !important; } </style>');
}
else{
$('.header').html('cycle 2 is determining the height');
$('.change-height#cycle-slideshow').removeClass('change-height');
}
}
Basically, you need to add !important to the height property if you want it to override the cycle2 plugin's determined value.

resize image height and width dynamically based on variable retrieved in django HTML Template

This seems like a very trivial doubt but I have spent a lot of time on it now and have not found any satisfactory solution.
I am working on Django. I have an image on a dummy.html. This html is being rendered from a function ipdtest() in my views.py.
These are the respective code snippets of the views function and the HTML.
def ipdtest(request, frameslug):
frame= VTryON.objects.get(slug=frameslug)
image_of_frame=frame.image.url
frame_path=("D:/Work-Backup/LiClipse Workspace/vTryON_DJango_Integration/vTryON/templates"+str(image_of_frame))
d=Frame_Superimposition()
resize_factor,height_frame,width_frame=Frame_Superimposition.frameSuperimpose(d,frame_path)
context={'frame':frame,'resize_factor':resize_factor, 'height_frame':height_frame,'width_frame':width_frame}
return render_to_response('dummy.html', context,context_instance=RequestContext(request))
My code in the dummy.html is as follows
<body class="body">
<div id="pageContainer">
RETURNED FROM VIEW
resize factor={{resize_factor}}<br>
height={{height_frame}}<br>
width={{width_frame}}<br>
<img id="original" src="{{frame.image.url}}" width="" height=""/><br>
<img id="resized" src="{{frame.image.url}}" width="" height=""/>
<br>
</div>
where height and width are the height and width of original image respectively. My problem is that based on the resize factor variable I want to dynamically change the height and width of my resized image. I can see all the values of resize factor, height and width displayed on to my django HTML page
To solve this, I googled and found that javascript was a possible solution and this is what I used in my HTML django template
<script type="text/javascript">
alert('JS in Dummy')
document.getElementById('resized').style.width='100px';
alert('###')
document.getElementById('resized').style.height='250px';
</script>
Instead of the '100px' and the '250px' (which I had set just to see whether the JavaScript works or not) for width and height here I should have the value for {{width * resize factor }} and {{height * resize factor}} here.
How should I do that so that based on the resize factor the width and height of the resized image is set. Is JavaScript the proper way to do this? I don't even see the code in the JavaScript going beyond the first alert in the JavaScript.
Please help. I have been stuck for a long while. Thanks in advance :)
EDIT:
The javascript should retrieve the django context variables in this way
<script type="text/javascript">
function resizeFrame(){
alert('resfac###')
var resize_factor="{{resize_factor}}";
var height_frame ="{{height_frame}}";
var width_frame ="{{width_frame}}";
var resized_ht= (height_frame * resize_factor)
var resized_wt= (width_frame * resize_factor)
alert(resized_ht)
alert(resized_wt)
document.getElementById('resized').style.height= resized_ht+"px";
alert('###')
document.getElementById('resized').style.width= resized_wt+"px";
};

dynamically adjusting div height to keep footer at bottom if content doesn't fill window

I need to adjust the container div height so that it keeps the footer at the bottom of the window onload and onresize when the content is too short but not if content pushes the footer off. I've tried variations of the css min-height:100% but it doesn't work. I've managed to make it work onload with this:
<div class="header></div>
<script>
var h = window.innerHeight-205;
document.write('<div id="container" class="container" style="min-height: ' + h + 'px;">');
</script>
....content of container....
</div>
<div class="footer"></div>
but when the window is resized my footer ends up in the middle of the page or off the page. I've tried calling a resize function but never seem to get it to reset the height. The codes I tried were:
function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").setAttribute("height",h);
}
and
function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").height = h;
}
I'm trying to use only javascript and css, not jquery. I'm not too familiar with JS so if I'm missing something to make the function call work please let me know! I'm not concerned about older browsers, just IE9+ and such, it also needs to work on iPads when the user rotates their screen...
Any help will be appreciated!

Try using a css aproach, like the one outlined here: http://www.cssstickyfooter.com/

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);
});