jsfiddle:
http://jsfiddle.net/FPkxn/2/
Html:
<input type="text" id="Display"/>
<div id="Container" style="overflow:scroll; height:200px; width: 115px;overflow-x: hidden;">
<div id="HugeDiv" style="background-color:red;width:100px;height:3000000px"></div>
</div>
Javascript (JQuery):
var Display = $("#Display");
$("#Container").scroll(function(){
Display.val($(this).scrollTop());
});
console.log($("#HugeDiv").height());
This wont display on browser! it will display -184070.03 in computed height
and the real height will be 1,533,917px.
¿Why? Firefox display the height as expected.
¿any work around?
Thanks
Related
I am developing an dashboard with Flask, Bootstrap4 and Bokeh. However, I cannot get a stable responsive design with bokeh. I have eight tabs with each two bokeh plots. The tabs are hidden via javaScript so can select a tab and it will be shown. The responsiveness is only working for the default visible tab. Accordingly, for the first tab the plots adjust to the given size. However, for the other tabs (same css, same html) the plots do not limit to the given css boundary and occupy a bigger space as the div they live in actually has. And, once I go back to the default visible tab, also those plots lost their responsiveness and behave like all the others.
I am using the sizing mode: "stretch both" and limit the height of the plots via css.
I would be thankful if someone could point me towards the solution. Cheers Lars
Here is my plotting code:
def plottingto(dataframe, lineID, plotnametext ):
names = lineID
source = ColumnDataSource(data={
'date' : dataframe['date'],
'time' : dataframe['time'],
'index' : dataframe.index,
'pendeltime_To_Real': dataframe['pendeltime_To_Real'],
'pendeltime_To': dataframe['pendeltime_To'],
'pendeltime_Back_Real': dataframe['pendeltime_Back_Real'],
'pendeltime_back': dataframe['pendeltime_back'],
'delay_to': dataframe['delay_to'],
'delay_back': dataframe['delay_back'],
})
hover_tool = HoverTool(tooltips=[('Uhrzeit', '#time'),('Pendelzeit', '#pendeltime_To_Real'),('Verzögerung','#delay_to')], names=names)
tools = [hover_tool, ResetTool(), BoxZoomTool()] #WheelZoomTool(), PanTool(),
#Bokeh Plott Rückweg Live Today
p = figure(plot_height=320, x_axis_type="datetime", y_range=(26, 60),tools=tools, sizing_mode="scale_width")
p.line(x='index', y='pendeltime_To_Real',line_width=1, line_color="#7db800", legend="Echte Pendelzeit", name=names[0], source=source)
p.line(x='index', y='pendeltime_To', line_width=1, line_color="red", legend="Durchschnittliche Pendelzeit", source=source)
p.toolbar.logo = None
plotname = file_html(p, CDN, plotnametext)
return plotname
Here is my css (in addition to bootstrap4):
.fixed_height{
height:380px;
padding-bottom: 30px;
margin-bottom: 50px;
}
Here is my html:
<div class="row mainrow">
<button class="accordion">
<h3 class="headingfullrow">STATISTIKEN ZUM PENDELFENSTER</h3>
</button>
<div class="panel">
<div class="container">
<div class="row">
<div class="col-sm diagrambox">
<div class="x_title">
<h2>Verkehrslage letzte 7 Werktage Hinweg</h2>
<div class="clearfix"></div>
</div>
<div class="x_panel tile fixed_height overflow_hidden">
{{BOKEHWEEKTO | safe}}
</div>
</div>
<div class="col-sm diagrambox">
<div class="x_title">
<h2>Verkehrslage letzte 7 Werktage Rückweg</h2>
<div class="clearfix"></div>
</div>
<div class="x_panel tile fixed_height overflow_hidden">
{{BOKEHWEEKBACK | safe}}
</div>
</div>
</div>
</div>
I am trying to upload media using below procedure:
Click on "Browse" of Image field in a sitecore item.
Click on "Upload Media" button.
Click on "Browse for Media files" and upload a new image.
By following the above procedure, I am getting this error message:
The maximum amount of data that you can upload is NaN undefined.
Hence the image doesn't upload. However I am able to upload image in Media Library and then after linking the same to the item but when trying to upload media directly from content item, I am getting the error.
How to solve this problem?
PFB Form tag statement
<form data-sc-id="Uploader" data-sc-databasename="master" data-sc-maxrequestlength="-1024" data-sc-executiontimeout="600" data-sc-destinationurl="/sitecore/media
library/Images/Social/Connector/download" data-sc-filesizeexceededtext="The maximum amount of data that you can upload is" data-sc-timeoutext="The media files could
not be uploaded. Please try again." class="sc-uploader row sc_Uploader_42 data-sc-registered" data-sc-require="/-/speak/v1/business/uploader.js" method="POST"
enctype="multipart/form-data">
<img class="sc-uploader-preview hide">
<div class="sc-uploader-content">
<span class="drag">
Drag and drop files here
<br>
or
<br>
</span>
<a href="#" class="btn btn-default sc-button sc_Button_14 data-sc-registered">
Browse for media files
<input class="sc-uploader-fileupload" type="file" name="files[]" multiple="" data-url="/api/sitecore/Media/Upload?
database=master&destinationUrl=/sitecore/media library/Images/Social/Connector/download">
</a>
<div class="sc-uploader-general-info">
<div class="sc-uploader-general-info-progressbar progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"
style="display: none;">
<div class="bar data-sc-registered" data-bind="style: { width: globalPercentage() + '%' }" style="width: 0%;"></div>
</div>
<div class="sc-uploader-general-info-data" style="display: block;">
<div class="sc-uploader-general-info-data-col col1">
<div class="sc-uploader-general-info-data-uploadingData" style="display: none;"><span data-bind="text: uploadedSize" class="data-sc-
registered">0</span> of </div><span data-bind=" text: totalSize" class="data-sc-registered">11.2 Kb</span>
</div>
<div class="sc-uploader-general-info-data-col col2">|</div>
<div class="sc-uploader-general-info-data-col col3">
<div class="sc-uploader-general-info-data-uploadingData" style="display: none;">
<span data-bind=" text: uploadedFiles" class="data-sc-registered">0</span> of
</div>
<span data-bind=" text: totalFiles" class="data-sc-registered">1</span> <span data-bind=" visible: totalFiles() > 1" class="data-sc-registered"
style="display: none;">Files</span>
<span data-bind=" visible: totalFiles() === 1" class="data-sc-registered">File</span>
</div>
</div>
</div>
</div>
</form>
You need to check if you have set the maxRequestLength from the web.config or you can update it from the IIS.
Web.config Way
Navigate to the path: system.web/httpRuntime and check if you have an entry for httpRuntime. If not, you need to specify one as follows:
<httpRuntime maxRequestLength="512000" executionTimeout="3600" enableKernelOutputCache="false" relaxedUrlToFileSystemMapping="true" requestValidationMode="4.0" enableVersionHeader="false" />
Note that the length is in kilobytes
IIS Way
Open IIS
Click on the site you want to accept larger file sizes
In the main window double click ‘Request Filtering’
On the top tab right click to see options and select ‘Edit Feature Settings’
Now change the number in the field ‘Maximum allowed content length (bytes)’
If it is present, you may need to increase the length.
UPDATE
As you can see, the attribute data-sc-maxrequestlength="-1024" has a negative value and this is why the above error occurred. So, the issue is with the maxrequestlength.
Problem: when Reveal data is taller than window height, scrolling moves the close icon off the page. I want to make it sticky so that you always have the option of closing the page without scrolling back up to the top.
I have tried loading the foundation 6 .sticky example into the reveal, but none of my attempts have been successful.
This is what I think should work, which is loaded into the reveal container <div id="modal2" style="height: 100%"></div> via ajax. Unfortunately, the close button just scrolls with the content.
<script>
// this script cannot be located in the layouts.js,
// because the trigger doesn't exist at page load.
$('#close-modal2').click(function(){
// $('#modal2').foundation('close'); didn't work for some reason.
// 'open' closes all other modals, so it accomplishes what I need.
$('#modal').foundation('open');
});
</script>
<div>
<button id="close-modal2" class="close-button sticky"
aria-label="Close reveal" type="button" data-sticky>
<span aria-hidden="true">×</span>
</button>
</div>
<div id="paragraph-wrapper" data-sticky-container>
<div class="row">
<div class="small-11 small-centered columns">
<div> Lots of content here, enough to overflow window...</div>
<div> Losts of content here..... etc.</div>
</div>
</div>
</div>
Am I missing something? Has anyone else been able to get a sticky close button in a reveal?
The basic behaviour of the Reveal is to close if the user clicks outside of the reveal container, so a user does already have a quick way of exiting the reveal.
However, you could also use position: fixed; on the close element.
That would keep it in the same spot while the modal scrolled up and down.
CSS
#modal2 > .close-button {
position: fixed;
top: 1rem; //or whatever
right: 2rem; //or whatever
}
e.g. in a Fiddle
Using position: fixed; is a bit of a pain for styling and mobiles but that will be depending on your particular design.
I am currently rendering several Flask fields (SelectFields, InputFields) using the following jinja2 template:
<div>{{ wtf.form_field(form.blockingProbability) }}</div>
This results in the following format:
I'd like to control the width of the dropdown list (narrower width would look more natural, methinks), but (unsurprisingly) when I try doing this by controlling the div width, the entire field, including the label is constrained and the label text wraps around.
Is there any way to control the width of the dropdown field (and other input fields), while keeping the width of the label intact (unwrapped)?
This worked for me
jinja2 template:
<div style="width: 50%">
{{ form1.language.label }}
</div>
<div style="width: 25%">
{{ form1.language }}
</div>
This is the form1 class:
class myForm(Form):
language = SelectField(u'Programming Language', choices=[('cpp', 'C++'), ('py', 'Python'), ('text', 'Plain Text')])
This should work too and it also maintain the visual consistency with other fields' widths:
<div>{{ wtf.form_field(form.blockingProbability, horizontal_columns=('lg', 2, 4)) }}</div>
The last value - 4 - in horizontal_columns sets the width of the input field.
When the Jinja2 code is rendered to HTML it will fill in a bunch of attributes on each form field. For your example, if you examine the page after it renders it should look something like:
<div>
<label for='blockingProbability'>
Blocking Probability
</label>
<input id='blockingProbability' name='blockingProbability' ... >
</div>
So you can control the fields and labels as a group or individually by adding some CSS into your Jinja2 template head:
<head>
<style type="text/css">
input {
width: 20px;
}
</style>
</head>
I have multiple slideshows but only want one running chosen by id. The rest turned off and hidden.
I have the first one loading onload.
I have a nested for loop running through and turning them on and off.
This is not working consistently.
Some of the code I found on the internet. the outer for loop runs before any id is even chosen.
I don't even know if the active slider is being stopped properly before the new one is activated.
My loops seem to work correctly with just alerts and no code for the slideshow.
Then when I introduce the slideshows it works sometimes but not consistently.
Choosing id 1 or 2 seems to work but sometimes it will not loop through the nested 3 or 4.
Some kind of conflict or is it logic error?
Please help this desperate beginner. I volunteered to do this for our choir
I am sorry that I wasn't able to format the code properly for viewing.
ok, I added jsfiddle
https://jsfiddle.net/5s0q30s8/
with the loops using only alerts.
<button id=1>Group Photos</button>
<button id=2>Miscellaneous</button>
<button id=3>Trips</button>
<button id=4>Old Pictures</button>
<script>
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i=0; i <= buttonsCount; i+=1){
buttons[i].onclick=function(e){
var id= this.id;
alert(id + ' clicked');
for (var i=1; i <= buttonsCount; i+=1){
alert('nested for' + i);
if (i != id) {
var temp = ('.slider-wrapper ' + i)
alert('Not id ' + temp);
$('.slider-wrapper' + i).hide();
/* $('#slider' + i).hide(); */
$('#slider' + i).data('nivoslider').stop();
}
else {
alert('true '+ i);
$('.slider-wrapper' + i).show();
$('#slider' + i).nivoSlider({ effect: 'fade' } );
} //end else
} //end nested for
};
} //end for
</script>
<div class="slider-wrapper1 theme-default">
<div id="slider1" class="nivoSlider">
<img src="images/Choir2014.jpg" alt="" title="2014" />
........More images.
</div>
</div>
<div class="slider-wrapper2 theme-default">
<div id="slider2" class="nivoSlider">
<img src="images/Choir2014.jpg" alt="" title="2014" />
........More images.
</div>
</div>
<div class="slider-wrapper3 theme-default">
<div id="slider3" class="nivoSlider">
<img src="images/Choir2014.jpg" alt="" title="2014" />
........More images.
</div>
</div>
<div class="slider-wrapper4 theme-default">
<div id="slider4" class="nivoSlider">
<img src="images/Choir2014.jpg" alt="" title="2014" />
........More images.
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider1').nivoSlider({ effect: 'fade' });
});
</script>
I must say, your code is very messy in my eyes. I do see you made an effort at using jQuery, so I will assume you are able to use that.
Your goal as I understand it:
There are 4 sliders
There are 4 buttons
You click one button, and the respective slideshow shows up.
$('#slideButtons button').click(function(){
var id = $(this).attr("id");
$('#content .slide:visible').hide();
$('#content #c' + id).show();
// Any other logic can be put here, like starting or stopping sliders.
});
/* Show the first slider, and hide everything else by applying display:none to it */
#content div:not(#c1) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideButtons">
<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
<button id="4">4</button>
</div>
<div id="content">
<div class="slide" id="c1">Number 1! Put Slideshow 1 here.</div>
<div class="slide" id="c2">Number 2! Put Slideshow 2 here.</div>
<div class="slide" id="c3">Number 3! Put Slideshow 3 here.</div>
<div class="slide" id="c4">Number 4! Put Slideshow 4 here.</div>
</div>
From here you can build it out. I'm sure it will look a lot cleaner too then. Also, if you are going to debug with that many alerts, try using console.log instead of alert. It's a lot less intrusive and you can simply read through it.