I'm currently using panolens.js for implementing a 3d view on my website. The responsive version seems to load fine but the problem arises in desktop. The image loaded into the script is only visibile when i open the console or try to inspect the element. Any suggestions?
HTML CODE
<div class="container-fluid" id="tour-sec">
<div class="container tour-sec">
<div class="row">
<h2>Schedule A Tour</h2>
<div id="container-1"></div>
</div>
JS
const panorama = new PANOLENS.ImagePanorama('2pano.jpg');
const viewer = new PANOLENS.Viewer();
viewer.add(panorama);
$(".panolens-container").detach().appendTo('#container-1');
Related
im trying to creat a css grid layout with multiple images using tailwind but im stuck because when i'm trying to span the rows it doesn't work, basicly i want the images to go down to the row-4 but theye stay at row-2
this is my reference: this is the layout im trying to do
this is my result: enter image description here
my code:
<div class="container grid grid-cols-4 grid-rows-4 gap-4 p-4">
<img src="/img/h1.jpg" class="col-span-2" alt="">
<img src="/img/v1.jpg" class="row-span-4 " alt="">
<img src="/img/v2.jpg" class="row-span-4" alt="">
<img src="/img/h2.jpg" class="col-span-2"alt="">
</div>
There are two things I think you need to change.
The first is the size of the grid: the grid in your example does not have 4 rows, but only two. You need to change the row and col span accordingly.
The second is the use of images in the grid. If you use images, it seems they need to have the exact correct aspect ratio for the grid, otherwise they will not align. Therefore I suggest you use divs.
You can see a working example here. I also included the not correct working version with images in it.
Simplified version of the code:
<div class="w-5/6 h-64 grid grid-cols-4 grid-rows-2 gap-4">
<div class="col-span-2 row-span-1 rounded-lg bg-cover bg-[url(...)]">1</div>
<div class="row-span-2 rounded-lg bg-cover bg-[url(...)]">2</div>
<div class="row-span-2 rounded-lg bg-cover bg-[url(...)]">3</div>
<div class="col-span-2 row-span-1 rounded-lg bg-cover bg-[url(...)]">4</div>
</div>
I am using django login template as the first page a user will see, upon successful login they will then be on the angular side because of the <app-root> tag in my django home template. I have a navbar component in angular and I would like to display the users name and give them an option to logout.
I can see it is getting the name correctly as it shows if I have it before the <app-root> tag. I am currently trying to pass {{user.username}} into the <app-root> tag and then eventually through to the navbar component but nothing appears on the navbar.
Django Template:
{{user.username}} //this bit shows the correct name
<app-root [theUser] = "{{user.username}}">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col text-center">
<div class="spinner-border p-5 m-5" role="status">
<span class="sr-only">Loading . . .</span>
</div>
</div>
</div>
</div>
</app-root>
app.component.html:
<app-nav-bar [theUserName]="theUser"></app-nav-bar>
nav-bar.component.html:
<h4>{{theUserName}}</h4>
I expected the username to be passed through the angular components and be displayed on the navbar. There is nothing being displayed, I can see the h4 is empty on dev tools.
The following should be changed
<app-root [theUser] = "{{user.username}}">
to:
<app-root [theUser] = "user.username">
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>
in my page
foreach ($json->items as $sam) {
$link= $sam->id->videoId;
echo''.$link.'';
//its showing last 5 youtube video id ok.. i set every video id witha button for modal
echo'<button type="button" data-toggle="modal" data-target="#PlayModal" class="btn btn-outline btn-danger">Play</button>';
}
but when im trying to open a model by box in new winddow pop up there only show 1st video ID. modal not getting '.$link.' valu in popup window. modal code puting same page blew finish {}
echo'<div class="modal inmodal" id="PlayModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-body">
<p>'.$name.'</p>
<div class="modal-footer">
<button type="button" class="btn btn-outline btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>';
According to the code given, even the first video should not play.
it is not printing the value of LINK inside the button, so it will not work.
Unless you have a JAVASCRIPT code observing the click and playing the video on click.
You can create the HTML code first manually containing the 5 video ID, and each video should have a button (according to your description), when clicked it will open the modal.
once that is done, you will be able to use php for each to properly echo the html code.
alternatively, the videos are in HTML list, and javascript will handle the event click, reading the video ID and passing to the player in the modal.
in either case, you need to understand the HTML structure first.
How do I go about configuring orbit so that the images fill out the whole viewing area?
At the moment i have a gallery with two images. These images are not as wide as the viewing area of the orbit slider and it looks kind of dull presenting them like this.
Is there a way to configure orbit so the whole viewing area is filled?
Look at this picture. In the top is how the orbit image is being rendered and in the botton is how i would like it to be rendered instead. Is there any way to do this or do i need to crop and resize all images myself?
Can you show the code you are using? Also, what size are the images that you are using? When I've done this, I typically have cropped the images larger than the area I want them to cover. On one site that I'm working on, I have them cropped at 1600x500.
Here is what that site is using right now:
<div class="row">
<div class="large-12 large-centered columns">
<div class="slideshow-wrapper">
<span class="preloader"></span>
<ul id="featured1" data-orbit data-options="pause_on_hover:false; timer_speed:5500;">
<li><img src="/assets/sliders/slider01.jpg" /> <div class="orbit-caption">...</div></li>
<li><img src="/assets/sliders/slider02.jpg" /> <div class="orbit-caption">...</div></li>
<li><img src="/assets/sliders/slider03.jpg" /> <div class="orbit-caption">...</div></li>
</ul>
</div>
</div>
</div>
The additional class="slideshow-wrapper" is in there so I can further customize the text, etc.