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"
Related
I have a project in Laravel and Livewire.
This is my view displaying a list of projects submitted.
#forelse ($projects as $index => $project)
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<a href="#" wire:click="showProjectDetails({{ $project->slug }})"
class="block p-6 bg-white border border-gray-200 rounded-sm shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-blue-500 dark:text-white">
{{ $project->title }}
</h5>
<p class="my-5">Bugdet Ghc500 - Ghc 700</p>
<p class="font-normal text-gray-700 dark:text-gray-400">{{ $project->description }}</p>
<ul class="flex gap-4 text-blue-600 mt-5">
<li>PHP</li>|
<li>Mobile App Development</li>|
<li>Database Management</li>|
<li>C++</li>
</ul>
</a>
</div>
#empty
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<p class="text-4xl">No Projects found</p>
</div>
#endforelse
When I click on a single project, a new view called show-project should display the details of the particular project that has been clicked.
My Livewire controller
public function showProjectDetails($slug)
{
return redirect()->route('show-project.details', $slug);
}
<a href="{{ route('show.project_details', ['slug' => $project->slug]) }}">
and web.php route can be either Controller or Livewire page.
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.
I am using ionic2.
Here is my template
<ion-slides autoplay="5000" loop="true" speed="500" pager="true">
<ion-slide class="slider1">
<h1>My <span>Neighbours</span></h1>
<p>My Neighbours is a directory of people who live in the building and have chosen to</p>
<div class="homepeople">
<div class="home"></div>
<div class="people"></div>
</div>
</ion-slide>
<ion-slide class="slider2">
<h1>CCTV <span>Monitoring</span></h1>
<p>Residents/Managers can view selected CCTV</p>
<div class="iconholder">
<img src="./assets/images/white CCTV Monitoring.svg" alt="Image">
</div>
</ion-slide>
<ion-slide class="slider3">
<h1>Emergency</h1>
<p>Security / Reception / Police / Ambulance / Fire</p>
<div class="iconholder">
<div class="iconholder-blk">
<img src="./assets/images/white emergency icon.svg" alt="Image">
</div>
<div class="iconholder-blk">
<img src="./assets/images/white Alarm.svg" alt="Image">
</div>
</div>
<button ion-button outline small (click)="navHome()">
Start using the app
</button>
</ion-slide>
</ion-slides>
It's work perfect.But i need loop does not continue on when last slide.
How can i do this.
Kindly advice me,
Thanks
So i used some of the helper functions on the ionic 2 documentation for sildes.
The (ionSlideDidChange)="slideChanged()" handles the slides autoplay, so when the slide reaches 3 which is your maximum, i stop the autoplay using this.slides.stopAutoplay();.
The html is as:-
<ion-slides autoplay="5000" loop="true" speed="500" pager="true" (ionSlideDidChange)="slideChanged()">
<ion-slide class="slider1">
<h1>My <span>Neighbours</span></h1>
<p>My Neighbours is a directory of people who live in the building and have chosen to</p>
<div class="homepeople">
<div class="home"></div>
<div class="people"></div>
</div>
</ion-slide>
<ion-slide class="slider2">
<h1>CCTV <span>Monitoring</span></h1>
<p>Residents/Managers can view selected CCTV</p>
<div class="iconholder">
<img src="./assets/images/white CCTV Monitoring.svg" alt="Image">
</div>
</ion-slide>
<ion-slide class="slider3">
<h1>Emergency</h1>
<p>Security / Reception / Police / Ambulance / Fire</p>
<div class="iconholder">
<div class="iconholder-blk">
<img src="./assets/images/white emergency icon.svg" alt="Image">
</div>
<div class="iconholder-blk">
<img src="./assets/images/white Alarm.svg" alt="Image">
</div>
</div>
<button ion-button outline small (click)="navHome()">
Start using the app
</button>
</ion-slide>
</ion-slides>
The ts is as:-
export class HomePage {
#ViewChild(Slides) slides: Slides;
constructor() {
}
slideChanged() {
let currentIndex = this.slides.getActiveIndex();
if(currentIndex==3){
this.slides.stopAutoplay();
}
}
Hope this helps.
You can have a configuration for an Ionic Slide
Complete Source: Link
HTML
<ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
(ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide *ngFor="let s of sliderOne.slidesItems">
<img src="../../assets/images/{{s.id}}.jpg">
</ion-slide>
</ion-slides>
Component
With AutoPlay Set to true
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay:true
};
UPDATE:
I found an answer. Just added this little code at the bottom:
$('#myform').submit(function()
{
$('#dates option').prop('selected', true);
});
I have a tempate:
div class="panel">
<div class="large-12 columns">
<div class="row collapse">
<div class="small-10 columns">
<input class="input-append date fdatepicker" id="date" type="text" name="date" value="" data-date-format="dd/mm/yyyy">
</div>
<div class="small-2 columns">
<input type="button" name="add" id="btn_AddToList" value="dodaj" class="button postfix" />
</div>
</div>
</div>
<br>
<select multiple="multiple" size="10" style="height: auto; width: auto" name="dates" id="dates" tabindex="2">
</select>
</div>
and I add dates to #dates select using this little code:
$('#btn_AddToList').click(function () {
var val = $('#date').val();
$('#dates').append('<option value="'+val+'">' + val + '</option>');
$('#date').val('');
event.preventDefault();
event.stopPropagation();
})
in my view i want to read dates so i thought i would use:
for d in request.POST.getlist('dates'):
if d is not None:
print(d)
But I get None. I tried to use request.POST.getlist('dates[]'): request.POST.get('dates'): but with no success. I am recieving None all the time.
What I am doing wrong?
UPDATE: I found an answer. Just added this little code at the bottom:
$('#myform').submit(function()
{
$('#dates option').prop('selected', true);
});
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]