Parallax Not functioning properly : Django - django

I have downloaded the template : http://keenthemes.com/preview/megakit/
On the index page there is a parallax :
<div class="js__parallax-window" style="background: url(img/1920x1080/04.jpg) 50% 0 no-repeat fixed;">
<div class="container g-text-center--xs g-padding-y-80--xs g-padding-y-125--sm">
<p class="text-uppercase g-font-size-14--xs g-font-weight--700 g-color--white-opacity g-letter-spacing--2 g-margin-b-50--xs">Testimonials</p>
<div class="s-swiper js__swiper-testimonials">
<!-- Swiper Wrapper -->
<div class="swiper-wrapper g-margin-b-50--xs">
<div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
<div class="g-padding-x-20--xs g-padding-x-50--lg">
<div class="g-margin-b-40--xs">
<p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
</div>
<div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
<h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
</div>
</div>
<div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
<div class="g-padding-x-20--xs g-padding-x-50--lg">
<div class="g-margin-b-40--xs">
<p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
</div>
<div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
<h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
</div>
</div>
<div class="swiper-slide g-padding-x-130--sm g-padding-x-150--lg">
<div class="g-padding-x-20--xs g-padding-x-50--lg">
<div class="g-margin-b-40--xs">
<p class="g-font-size-22--xs g-font-size-28--sm g-color--white"><i>" I have purchased many great templates over the years but this product and this company have taken it to the next level. Exceptional customizability. "</i></p>
</div>
<div class="center-block g-hor-divider__solid--white-opacity-lightest g-width-100--xs g-margin-b-30--xs"></div>
<h4 class="g-font-size-15--xs g-font-size-18--sm g-color--white-opacity-light g-margin-b-5--xs">Jake Richardson / Google</h4>
</div>
</div>
</div>
<!-- End Swipper Wrapper -->
<!-- Arrows -->
<div class="g-font-size-22--xs g-color--white-opacity js__swiper-fraction"></div>
<!-- End Arrows -->
</div>
</div>
</div>
The Parallax image is basically defined with properties in the line :
<div class="js__parallax-window" style="background: url(img/1920x1080/04.jpg) 50% 0 no-repeat fixed;">
Now to use the same in django I changed the url of the image to following:
<div class="js__parallax-window" style="background: url({% static 'img_events/1920x1080/04.jpg' %}) 50% 0 no-repeat fixed;" >
The only problem the parallax is not working properly in this case, the parallax image size should only be 50% but it causes a mismatch in the height and placement of the testimonials and the background image whereas the same code works in the template

The only problem here was that <!DOCTYPE html> was not included at the beginning of the page.

Related

Bokeh - Issue responsive design with Flask and Bootstrap4

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>

github pages missing path

In my github repo exists a folder within the pathway "TriviaGame/assets/images/" but on the io page of that repo, the pathway to the file produces a "404". It seems that github pages is not uploading the image. ["TriviaGame/assets/images/backgroundimage.png"][1]
TriviaGame/assets/images/backgroundImage.png
https://dboothy.github.io/TriviaGame/assets/images/backgroundimage.png
Failed to load resource: the server responded with a status of 404 ()
dboothy.github.io/:1 GET https://dboothy.github.io/TriviaGame/assets/images/backgroundimage.png 404
404 error on io
[1]:
.content-wrap {
background: url("../images/backgroundimage.png") no-repeat center fixed;
background-size: cover;
min-height: 100vh;
}
<div class="content-wrap" align="center">
<div id="heading" class="hide">
<h2>Time remaining: <span id="timer"></span></h2>
</div>
<div class= "container">
<div id = "game-wrapper">
<div id="main-content">
<div class="content-container">
<h1>Movie Trivia</h1>
<div id="welcome">
<p>try and answer as many question in the time allowed</p>
<div id="results" class="hide"></div>
<button id="startGame" class="textBox">Start</button>
</div>
<div id="gameWrap" class="hide">
<div id="questionWrap"></div>
<button id="finish" class="btn btn-warning">FINISH</button>
</div>
</div>
</div>
</div>
</div>
</div>
https://i.stack.imgur.com/R7kG8.png
In css above I typed:
"../images/backgroundimage.png"
when actually file was named "../images/backgroundImage.png"

Foundation 6 deep linking nested tabs

Hej all !
As the title of the subject suggest, I wonder if it's possible to have deep linking that works on nested tabs.
I mean, if I use only one tabs container, it works fine, but I don't know how to deep link to a tab inside a parent tab. It should first open the parent tab and then display the goal child tab.
Is it possible using Foundation 6 deep-linking please (without hacks) ?
Let's say we have this code :
<div>
<ul class="tabs" data-tabs id="tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 1</li>
<li class="tabs-title">Content 2</li>
</ul>
</div>
<div class="tabs-content" data-tabs-content="tabs">
<div class="tabs-panel is-active" id="tab1">
My Content 1
</div>
<div class="tabs-panel" id="tab2">
<ul class="tabs" data-tabs id="tab2-tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 2-1</li>
<li class="tabs-title">Content 2-2</li>
</ul>
<div class="tabs-content" data-tabs-content="tab2-tabs">
<div class="tabs-panel is-active" id="tab2-tab1">
My Content 2-1
</div>
<div class="tabs-panel" id="tab2-tab2">
My Content 2-2
</div>
</div>
</div>
</div>
How can I open "My Content 2-2" using deep-linking please ?

Selenium Python Xpath how to select the correct span text from many nested div tags

I have a web page with a left hand menu. It is made up of many div tags.
I have noticed when my Selenium Python script runs it is not clicking the text I want clicked from the left hand menu. It is clicking something else.
My Xpath is not correct.
I would like to locate the text "Statistics" (it is in a div\span tag) which has the parent div text "Analysis"
It is not clicking the correct text "Statistics" because there maybe another "Statistics" somewhere in the HTML source. If i start from the div tag which has the text "Analysis" and then find the text "Statistics" then I will get the correct element.
My Xpath is:
.//div//span[#title="Analysis"]/following::div[5]//span[text()="Statistics"]
The HTML is:
<div>
<span class="" title="Analysis"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">Analysis</span>
</div>
</div>
</div>
</div>
</div>
<div style="overflow: hidden;">
<div>
<div>
<div aria-selected="false" role="treeitem" aria-setsize="3" aria-posinset="1" aria-expanded="false"
aria-level="2">
<div class="GJPPK2LBIF" style="padding-left: 16px;">
<div class="GJPPK2LBIF GJPPK2LBKF" style="padding-left: 16px;position:relative;" onclick="">
<div class="GJPPK2LBJF" style="left: 0px;width: 15px;height: 15px;position:absolute;">
<img border="0"
style="width:15px;height:15px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA7/HbnjJn53wAAAABJRU5ErkJggg==) no-repeat 0px 0px;"
src="http://test1:8080/clearcore/ClearCore/clear.cache.gif"
onload="this.__gwtLastUnhandledEvent=" load";"/>
</div>
<div class="GJPPK2LBLF">
<div style="padding-left: 22px;position:relative;zoom:1;">
<div style="left:0px;margin-top:-8px;position:absolute;top:50%;line-height:0px;">
<img border="0"
style="width:16px;height:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaekJggg==) no-repeat 0px 0px;"
src="http://test1:8080/clearcore/ClearCore/clear.cache.gif"
onload="this.__gwtLastUnhandledEvent=" load";"/>
</div>
<div>
<span class="" title="Statistics"
style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">Statistics</span>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks,
Riaz
If you have FireFox with FirePath you can test the xpath and see how many and which matches you get. For instance:
//span[text()="Statistics"]
This may result in 1 matching node but also in more. Let's assume there's two matches and the one you want is the second one. Then you'd choose:
//span[text()="Statistics"][2]

Display element in form using Zurb Foundation

I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
​
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file