In laravel5 instead of using foreach I can use the if statement to filter the data on the basis of SQL query. How can I view my page using ifelse statement in laravel5? I have three div class in these class how to fetch the data from the database? How to use in the blade.php file?
How can I filter the data from database using routes and controller?
<div class="container">
<div class="block-content block-content-small-padding">
<div class="block-content-inner">
<h2 class="center">Recent Properties</h2>
<ul class="properties-filter">
<li class="selected"><span>All</span></li>
<li><a href="#" class="featured" data-filter=".featured" ><span>Featured</span></a></li>
<li><a href="#" class="rent" data-filter=".rent" ><span>Rent</span></a></li>
<li><a href="#"class="sale" data-filter=".sale" ><span>Sale</span></a></li>
</ul>
<div class="properties-items isotope" style="position: relative; overflow: hidden; height: 810px;">
<div class="row ">
#if($val -> $value)
<div class="property-item col-sm-6 col-md-3 isotope-item my " style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
<div class="property-box">
<div class="property-box-inner">
<h3 class="property-box-title">{{$value->city}}</h3>
<h4 class="property-box-subtitle">{{$value->state}}</h4>
<div class="property-box-picture">
<div class="property-box-price">{{$value->property_price}}</div>
<div class=""> <img src="images/test/{{$value->image}}" alt=""> </div>
</div>
</div>
</div>
</div>
#elseif($val -> $value)
<div class="property-item col-sm-6 col-md-3 isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
<div class="property-box">
<div class="property-box-inner">
<h3 class="property-box-title">{{$value->city}}</h3>
<h4 class="property-box-subtitle">{{$value->state}}</h4>
<div class="property-box-picture">
<div class="property-box-price">{{$value->property_price}}</div>
<div class=""> <img src="images/test/{{$value->image}}" alt=""> </div>
</div>
</div>
</div>
</div>
#else($val -> $value)
<div class="property-item property-sale col-sm-6 col-md-3 isotope-item myButton my" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
<div class="property-box">
<div class="property-box-inner">
<h3 class="property-box-title">{{$value->city}}</h3>
<h4 class="property-box-subtitle">{{$value->state}}</h4>
<div class="property-box-picture">
<div class="property-box-price">{{$value->property_price}}</div>
<div class=""> <img src="images/test/{{$value->image}}" alt=""> </div>
</div>
</div>
</div>
</div>
#endif
Controller:
public function index()
{
$view=DB::table('property_details')
->get();
return View::make('index', array('val'=>$view));
}
public function rentshow()
{
$show=DB::table('property_details')
->where('sale_or_rent','=','rent')
->get();
return View::make('index', array('val'=>$show));
}
public function saleshow()
{
$show=DB::table('property_details')
->where('sale_or_rent','=','sale')
->get();
return View::make('index', array('val'=>$show));
}
You need to correct your if / else statements to:
#if ( $val == "something" )
// do something
#elseif ( $val == "something-else" )
// do something else
#else
// the default
#endif
You can't pass a condition to #else like you've done in your code.
Related
I have a bug when I want to write a thread. I write 2 letters after he stops writing I have to click again to continue writing.
Threadmodel
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Qirolab\Laravel\Reactions\Traits\Reactable;
use Qirolab\Laravel\Reactions\Contracts\ReactableInterface;
class Thread extends Model implements ReactableInterface
{
use HasFactory, Reactable;
public function user(){
return $this->belongsTo(User::class);
}
public function replies(){
return $this->hasMany(ThreadReply::class);
}
public function isLiked()
{
if (auth()->user()) {
return $this->isReactBy(auth()->user());
}
return false;
}
public function removeLike()
{
if (auth()->user()) {
return $this->removeReaction();
}
return false;
}
}
ThreadController
<?php
namespace App\Http\Controllers\User;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use App\Models\Thread;
use App\Models\ThreadReply;
use App\Models\SubCategory;
use Auth;
class ThreadController extends Controller
{
public function create($subcategory){
return view('threads.create',compact('subcategory'));
}
public function store(Request $request,$subcategory){
$category = SubCategory::where('title',$subcategory)->first();
$thread = new Thread();
$thread->title = $request->title;
$thread->slug = preg_replace('/[^A-Za-z0-9\-]/', '', str_replace(' ', '-', $request->title)).'-'.Str::random(5);
$thread->description = $request->description;
$thread->sub_category_id = $category->id;
$thread->user_id = Auth::user()->id;
$thread->save();
return redirect()->route('subcategory.thread',$request->subcategory);
}
public function show($slug){
$thread = Thread::where('slug',$slug)->first();
return view('threads.show',compact('thread'));
}
}
App/HTTP/Livewire/ThreadDisplay.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Thread;
use App\Models\User;
use App\Models\ThreadReply;
use Auth;
class ThreadDisplay extends Component
{
public Thread $thread;
public ThreadReply $threadreply;
public $description;
protected $listeners = ['update-thread' => 'updatethread'];
public function mount(Thread $thread)
{
$this->thread = $thread;
// dd($this->thread);
}
public function react($reaction)
{
if ($this->thread->isLiked()) {
$this->thread->toggleReaction($reaction);
if($reaction == $this->thread->reacted()?->type){
if($reaction == 'hand-thumbs-down-fill' || $reaction == 'emoji-frown-fill' ){
$user = User::find($this->thread->user->id)->increment('reactions', 1);
}else{
$user = User::find($this->thread->user->id)->decrement('reactions', 1);
}
}else{
$negative = ['hand-thumbs-down-fill','emoji-frown-fill'];
$positive = ['hand-thumbs-up-fill','emoji-heart-eyes-fill','heart-fil'];
if(in_array($reaction,$negative)){
if(!in_array($this->thread->reacted()->type,$negative)){
$user = User::find($this->thread->user->id)->decrement('reactions', 2);
}
}else{
if(!in_array($this->thread->reacted()->type,$positive)){
$user = User::find($this->thread->user->id)->increment('reactions', 1);
}
}
}
} else{
$this->thread->toggleReaction($reaction);
if($reaction == 'hand-thumbs-down-fill' || $reaction == 'emoji-frown-fill' ){
$user = User::find($this->thread->user->id)->decrement('reactions', 1);
}else{
$user = User::find($this->thread->user->id)->increment('reactions', 1);
}
}
$this->thread = Thread::find($this->thread->id);
}
public function replysubmit(){
$threadreply = new ThreadReply();
$threadreply->thread_id = $this->thread->id;
$threadreply->user_id = Auth::user()->id;
$threadreply->description = $this->description;
$this->description = '';
$threadreply->save();
$this->dispatchBrowserEvent('threadreplysent');
}
public function updatethread(){
$this->thread = Thread::find($this->thread->id);
}
public function render()
{
return view('livewire.thread-display');
}
}
View/threads/create.blade.php
#extends('layouts.app')
#section('stylesheets')
{{-- <link href="{{ asset('ckeditor/contents.css') }}" rel="stylesheet"> --}}
#endsection
#section('content')
<div class="container-fluid mt-5">
<form action="{{ route('thread.store',$subcategory) }}" method="POST">
#csrf
<div class="row">
<div class="col-xl-12 col-lg-12 col-sm-12 col-12 m-auto">
<div class="card shadow">
<div class="card-header">
<h4 class="card-title"> Post Thread </h4>
</div>
<div class="card-body">
<div class="form-group">
<label> Title </label>
<input type="text" class="form-control" name="title" placeholder="Enter the Title" required>
</div>
<div class="form-group" >
<label> Description </label>
<textarea class="form-control" id="description" placeholder="Enter the Description" name="description"></textarea>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</div>
</div>
</form>
</div>
#endsection
#section('scripts')
<script src="//cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
<script>
// Replace the <textarea id="editor1"> with a CKEditor 4
// instance, using default configuration.
CKEDITOR.replace( 'description' );
</script>
#endsection
View/livewire/thread-display.blade.php
#push('stylesheets')
{{-- <script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script> --}}
<style>
.parent-social {
position: relative;
}
.child-social {
width: auto !important;
bottom: 0;
right: 1rem;
margin: 1rem 0;
}
blockquote {
padding-left: 20px;
padding-right: 8px;
border-left: 5px solid #ccc;
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
margin: 13px 40px;
}
.reaction-parent {
position: relative;
overflow: hidden;
display: flex;
justify-content: flex-end;
}
.reaction-child {
width: 135px;
/* Position the tooltip */
position: absolute;
z-index: 1;
right: 0;
}
.reaction-parent i {
margin-right: 0.5rem;
}
.reaction-child .bi {
font-size: 1.5rem;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
#endpush
<div class="container-fluid">
<div class="row no-gutters border m-1 p-2 parent-social">
<div class="col-12 col-md-2 col-sm-12">
<div class="card d-flex justify-content-center align-items-center" style="width: 100%;">
<img src="{{ asset('/uploads/avatar/defaultavatar.webp') }}" class="" alt="..." height="auto"
width="75px">
<div class="card-body">
<h5 class="card-title text-center">{{ $thread->user->name }} <span><i class="fa fa-envelope"></i></span></h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Joined: {!! date('d-M-y', strtotime($thread->user->created_at)) !!}</li>
<li class="list-group-item">Messages: 0</li>
<li class="list-group-item">Reactions: {{ $thread->user->reactions }}</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-md-10 col-sm-12" style="overflow: hidden;">
<div class="card-body">
<h5 class="card-title">{{ $thread->title }}</h5>
</div>
<hr class="m-1">
<div style="overflow-y: scroll; height: 300px; width: 100%; overflow-x: hidden">
{!! $thread->description !!}
</div>
<div class="child-social">
<div class="reaction-parent">
<i onclick="showReactions(this)"
class="#if ($thread->isLiked()) bi bi-{{ $thread->reacted()?->type }}#else bi bi-hand-thumbs-up #endif"
style="font-size: 1.2rem; cursor: pointer;" id="reaction"></i>
<a href="#ckreply"
onclick="ckreply({{ json_encode($thread->description, 1) }},{{ json_encode($thread->user->name, 1) }})"
style="color: #000;">
<i class="bi bi-reply" style="font-size: 1.2rem;"></i>
</a>
</div>
<div class="reaction-child" style="display:none;">
<i wire:click="react('hand-thumbs-up-fill')" class="bi bi-hand-thumbs-up-fill"></i>
<i wire:click="react('hand-thumbs-down-fill')" class="bi bi-hand-thumbs-down-fill"></i>
<i wire:click="react('emoji-heart-eyes-fill')" class="bi bi-emoji-heart-eyes-fill"></i>
<i wire:click="react('emoji-frown-fill')" class="bi bi-emoji-frown-fill"></i>
<i wire:click="react('heart-fill')" class="bi bi-heart-fill"></i>
</div>
</div>
</div>
</div>
#if (count($thread->replies) > 0)
#foreach ($thread->replies as $reply)
<livewire:thread-reply :reply="$reply" :key="time() . rand(0, 999)"/>
#endforeach
#else
#endif
<div class="row no-gutters border m-1 p-2" id="ckreply" wire:ignore>
<div class="col-12 col-md-2 col-sm-12">
<div class="card d-flex justify-content-center align-items-center" style="width: 100%;">
<img src="{{ asset('/uploads/avatar/defaultavatar.webp') }}" class="" alt="..."
height="75px" width="75px">
</div>
</div>
<div class="col-12 col-sm-6 col-md-10 col-sm-12 parent-social">
<form wire:submit.prevent="replysubmit">
<div class="form-group">
<label> Reply </label>
<textarea wire:model.defer="description" class="form-control" id="description" name="description"></textarea>
</div>
<div class="form-group">
<button type="submit"
class="btn btn-primary my-2 d-flex justify-content-center align-items-center"> <i
class="bi bi-reply" style="margin-bottom: 8px; margin-right: 4px;"></i> Post
reply</button>
</div>
</form>
</div>
</div>
</div>
#push('scripts')
<script src="//cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
<script>
var ckdata = "";
var editor = CKEDITOR.replace('description');
// The "change" event is fired whenever a change is made in the editor.
editor.on('change', function(event) {
console.log(event.editor.getData())
#this.set('description', event.editor.getData());
ckdata = event.editor.getData();
})
window.addEventListener('threadreplysent', function() {
CKEDITOR.instances.description.setData('');
ckdata = "";
});
window.addEventListener('replyreaction', function() {
window.livewire.emit('update-thread');
});
function ckreply(description, username) {
console.log(username)
ckdata +=
`<blockquote>${username} said:${description}</blockquote><p> </p>`;
CKEDITOR.instances.description.setData(ckdata);
var editor = CKEDITOR.instances[description];
editor.focus();
}
function showReactions(ele) {
if(ele.parentNode.nextElementSibling.style.display == "none") {
ele.parentNode.nextElementSibling.style.display = "block";
} else {
ele.parentNode.nextElementSibling.style.display = "none";
}
// $('.reaction-child').toggle();
}
</script>
#endpush
View/livewire/thread-reply.blade.php
<div class="row no-gutters border m-1 p-2 parent-social">
<div class="col-12 col-md-2 col-sm-12">
<div class="card d-flex justify-content-center align-items-center" style="width: 100%;">
<img src="{{ asset('/uploads/avatar/defaultavatar.webp') }}" class="" alt="..."
height="auto" width="75px">
<div class="card-body">
<h5 class="card-title text-center">{{ $reply->user->name }}</h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Joined: {!! date('d-M-y', strtotime($reply->user->created_at)) !!}</li>
<li class="list-group-item">Messages: 0</li>
<li class="list-group-item">Reactions: {{ $reply->user->reactions }}</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-md-10 col-sm-12" style="overflow: hidden;">
<div class="card-body">
<h5 class="card-title">{{ $reply->title }}</h5>
</div>
<hr class="m-1">
<div style="overflow-y: scroll; height: 300px; width: 100%; overflow-x: hidden">
{!! $reply->description !!}
</div>
<div class="child-social">
<div class="reaction-parent">
<i onclick="showReactions(this)"
class="#if ($reply->isLiked()) bi bi-{{ $reply->reacted()?->type }}#else bi bi-hand-thumbs-up #endif"
style="font-size: 1.2rem; cursor: pointer;"></i>
<a href="#ckreply"
onclick="ckreply({{ json_encode($reply->description, 1) }},{{ json_encode($reply->user->name, 1) }})"
style="color: #000;">
<i class="bi bi-reply" style="font-size: 1.2rem;"></i>
</a>
</div>
<div class="reaction-child" style="display:none;">
<i wire:click="react('hand-thumbs-up-fill')" class="bi bi-hand-thumbs-up-fill"></i>
<i wire:click="react('hand-thumbs-down-fill')" class="bi bi-hand-thumbs-down-fill"></i>
<i wire:click="react('emoji-heart-eyes-fill')" class="bi bi-emoji-heart-eyes-fill"></i>
<i wire:click="react('emoji-frown-fill')" class="bi bi-emoji-frown-fill"></i>
<i wire:click="react('heart-fill')" class="bi bi-heart-fill"></i>
</div>
</div>
</div>
</div>
above you see all that I wrote. I explain my situation again. When I'm writing my thread after 2-3 letters it stops writing and I have to click again to continue writing my thread. I just have this little bug otherwise everything works fine
I have a user profile screen which shows a user's information along with a profile picture. There I have a link called "Change Photo" which triggers a file input to upload a new image. Then I have a JS code to submit the form soon after the file input takes the image. But once the form is submitted, at my controller, when I dump my request, the filebag is empty.
This is my .twig file
{% extends('base.html.twig') %}
{% block title %}Welcome- Open Rpoad Tolling!{% endblock %}
{% block stylesheets %}
<style>
body{
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
}
.emp-profile{
padding: 3%;
margin-top: 3%;
margin-bottom: 3%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img{
text-align: center;
}
.profile-img img{
width: 70%;
height: 100%;
}
.profile-img .file {
position: relative;
overflow: hidden;
margin-top: -20%;
width: 70%;
border: none;
border-radius: 0;
font-size: 15px;
background: #212529b8;
}
.profile-img .file input {
position: absolute;
opacity: 0;
right: 0;
top: 0;
}
.profile-head h5{
color: #333;
}
.profile-head h6{
color: #0062cc;
}
.profile-edit-btn{
border: none;
border-radius: 1.5rem;
width: 70%;
padding: 2%;
font-weight: 600;
color: #6c757d;
cursor: pointer;
}
.profile-edit-btn:hover{
color: #FFF;
background: rgb(240, 173, 78, 0.75);
/*border: 2px solid rgba(240, 173, 78, 0.75);*/
}
.proile-rating{
font-size: 12px;
color: #818182;
margin-top: 5%;
}
.proile-rating span{
color: #495057;
font-size: 15px;
font-weight: 600;
}
.profile-head .nav-tabs{
margin-bottom:5%;
}
.profile-head .nav-tabs .nav-link{
font-weight:600;
border: none;
}
.profile-head .nav-tabs .nav-link.active{
border: none;
border-bottom:2px solid #0062cc;
}
.profile-work{
padding: 14%;
margin-top: -15%;
}
.profile-work p{
font-size: 12px;
color: #818182;
font-weight: 600;
margin-top: 10%;
}
.profile-work a{
text-decoration: none;
color: #495057;
font-weight: 600;
font-size: 14px;
}
.profile-work ul{
list-style: none;
}
.profile-tab label{
font-weight: 600;
}
.profile-tab p{
font-weight: 600;
color: #0062cc;
}
</style>
{% endblock %}
{% block body %}
<div class="container emp-profile">
<form action="{{ path('changeImage') }}" name="changeProfilePhoto" id="changeImageForm" method="post" enctype="multipart/form-data" >
<div class="row">
<div class="col-md-4">
<div class="profile-img">
<img src="{{ photoSrc }}" alt=""/>
<div class="file btn btn-lg btn-primary" id="fileUploadButton">
Change Photo
</div>
</div>
</div>
<div class="col-md-6">
<div class="profile-head">
<h5>
{{ user.firstName }} {{ user.lastName }}
</h5>
<h6>
Web Developer and Designer
</h6>
<p class="proile-rating">RANKINGS : <span>8/10</span></p>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Timeline</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2">
<button type="button" onclick="window.location.href = '{{ editProfile }}';" class="profile-edit-btn" name="btnAddMore" >Edit Profile</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="profile-work">
<p>WORK LINK</p>
Website Link<br/>
Bootsnipp Profile<br/>
Bootply Profile
<p>SKILLS</p>
Web Designer<br/>
Web Developer<br/>
WordPress<br/>
WooCommerce<br/>
PHP, .Net<br/>
</div>
</div>
<div class="col-md-8">
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row">
<div class="col-md-6">
<label>User Id</label>
</div>
<div class="col-md-6">
<p>Kshiti123</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Name</label>
</div>
<div class="col-md-6">
<p>Kshiti Ghelani</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Email</label>
</div>
<div class="col-md-6">
<p>kshitighelani#gmail.com</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Phone</label>
</div>
<div class="col-md-6">
<p>123 456 7890</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Profession</label>
</div>
<div class="col-md-6">
<p>Web Developer and Designer</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="row">
<div class="col-md-6">
<label>Experience</label>
</div>
<div class="col-md-6">
<p>Expert</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Hourly Rate</label>
</div>
<div class="col-md-6">
<p>10$/hr</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Total Projects</label>
</div>
<div class="col-md-6">
<p>230</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>English Level</label>
</div>
<div class="col-md-6">
<p>Expert</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Availability</label>
</div>
<div class="col-md-6">
<p>6 months</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>Your Bio</label><br/>
<p>Your detail description</p>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="file" id="changeImageButton" name="file"/>
</form>
</div>
<script>
const changeImgButton = document.getElementById('changeImageButton');
const fileUploadButton = document.getElementById('fileUploadButton');
const formHome = document.getElementById('changeImageForm');
changeImgButton.addEventListener("change",function () {
formHome.submit();
});fileUploadButton.addEventListener("click",function () {
changeImgButton.click();
});
</script>
{% endblock %}
// This is my controller
/**
* #Route("/changeImage", name="changeImage")
* #param Request $request
*/
public function changeImage(Request $request){
$file = $request->files->get('file');
dump($request);die;
if($file){
$fileName = md5(uniqid()).'.'.$file->guessExtension();
$file->move(
$this->getParameter('uploads_dir'), $fileName
);
}
}
I'm updating my work website using Joomla - I've been given the old copy and I need to improve it. (The website is 24x7cloud.co.uk) towards the bottom I want to create an "Accreditation's" section, however, every time I add this section it affects my "Contact Us" section which is below it. (Attached screenshots to show)
The grey overlay should go over the whole image and the image shouldn't be stretched so far down. It should cut off where the grey goes across the telephone box. It's like this when the section above is not there, but as soon as I create it - it pushes the image and creates this effect...
The Orange scribble is the part that is broken. That part of the scribble shouldn't be there. It should cut off where the grey banner stops
What the website should look like
What it looks like when adding a new section above
This is the HTML for the "Contact Us"
/* ==== 18) Contact Details ==== */
#contact {
background-position: center 0%;
background-size: cover;
background-repeat: no-repeat;
background-image: url(../img/bg_8.jpg);
display: table;
width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: hidden;
vertical-align: middle;
z-index: 1;
color: #121212;
}
.details {
margin-top: 20px;
margin-bottom: 20px;
color: #fff;
z-index: 3;
}
.phone-info {
line-height: 0;
border-radius: 3px;
display: inline-block;
color: #fff;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 30px;
padding-top: 0px;
}
.blah a {
color: #ffffff;
font-weight: 300;
font-family: "Raleway", sans-serif;
}
/* Overlay on contact us */
}
.parallax-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(../img/pattern.png);
background-repeat: repeat;
background-color: rgba(44, 62, 80, 0.6);
z-index: 2;
}
<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
</div>
<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
<h2>Contact us</h2>
<p class="lead">We would love to work with you!</p>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h3><small class="white"><i class="icon ion-ios7-telephone ion-1x white"></i> 0330 223 1042</small></h3>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center blah">
<h4>
<script type="text/javascript">
//<![CDATA[
<!--
var x = "function f(x){var i,o=\"\",ol=x.length,l=ol;while(x.charCodeAt(l/13)!" +
"=92){try{x+=x;l+=l;}catch(e){}}for(i=l-1;i>=0;i--){o+=x.charAt(i);}return o" +
".substr(0,ol);}f(\")621,\\\"6<0#+6f)9ov,ncP220\\\\020\\\\720\\\\730\\\\230\\" +
"\\430\\\\220\\\\400\\\\5000\\\\020\\\\320\\\\500\\\\630\\\\000\\\\r\\\\SN71" +
"30\\\\<H310\\\\710\\\\400\\\\)Cr\\\\5#4=40030\\\\x500\\\\e2:!='rs410\\\\;-," +
"8%%n\\\\h\\\"\\\\2,7!'620\\\\}K]XVYOJ700\\\\\\\\\\\\C330\\\\[P430\\\\^\\\\\\" +
"\\CKNHNXi\\\\\\\\DGQJLA330\\\\Okrt}v8E%qsg|3s-2'`ai771\\\\c{771\\\\)rkanwbo" +
"230\\\\\\\"(f};o nruter};))++y(^)i(tAedoCrahc.x(edoCrahCmorf.gnirtS=+o;721=" +
"%y{)++i;l<i;0=i(rof;htgnel.x=l,\\\"\\\"=o,i rav{)y,x(f noitcnuf\")";
while (x = eval(x));
//-->
//]]>
</script>
</h4>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h4><small class="white"><a target="_self" href="http://www.redcello.co.uk/index.php?option=com_rsform&view=rsform&formId=6" style="color:#FFFFFF;">Click here for a call back</a></small></h4>
</div>
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2" style="padding-top:20px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://twitter.com/RedcelloUK">
<i class="icon ion-social-twitter ion-3x white"></i>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://www.linkedin.com/company/redcello">
<i class="icon ion-social-linkedin ion-3x white"></i>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://www.facebook.com/RedcelloUK">
<i class="icon ion-social-facebook ion-3x white"></i>
</a>
</div>
</div>
</div>
</div>
Not sure if this is helpful, but here is the element from firefox:
<section id="contact" data-stellar-background-ratio="1.0" data-stellar-vertical-offset="" style="background-position: 50% 0px;" class="current">
<div class="row text-center" style="position:relative;">
<div class="parallax-overlay"></div>
<div class="container content">
<div class="moduletable">
<div class="custom">
<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
</div>
<div class="details col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top:60px;">
<h2>Contact us</h2>
<p class="lead">We would love to work with you!</p>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h3><small class="white"><i class="icon ion-ios7-telephone ion-1x white"></i> 0330 223 1042</small></h3>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center blah">
<h4>
<script type="text/javascript">
//<![CDATA[
<!--
var x="function f(x){var i,o=\"\",ol=x.length,l=ol;while(x.charCodeAt(l/13)!" +
"=92){try{x+=x;l+=l;}catch(e){}}for(i=l-1;i>=0;i--){o+=x.charAt(i);}return o" +
".substr(0,ol);}f(\")621,\\\"6<0#+6f)9ov,ncP220\\\\020\\\\720\\\\730\\\\230\\"+
"\\430\\\\220\\\\400\\\\5000\\\\020\\\\320\\\\500\\\\630\\\\000\\\\r\\\\SN71" +
"30\\\\<H310\\\\710\\\\400\\\\)Cr\\\\5#4=40030\\\\x500\\\\e2:!='rs410\\\\;-," +
"8%%n\\\\h\\\"\\\\2,7!'620\\\\}K]XVYOJ700\\\\\\\\\\\\C330\\\\[P430\\\\^\\\\\\"+
"\\CKNHNXi\\\\\\\\DGQJLA330\\\\Okrt}v8E%qsg|3s-2'`ai771\\\\c{771\\\\)rkanwbo" +
"230\\\\\\\"(f};o nruter};))++y(^)i(tAedoCrahc.x(edoCrahCmorf.gnirtS=+o;721=" +
"%y{)++i;l<i;0=i(rof;htgnel.x=l,\\\"\\\"=o,i rav{)y,x(f noitcnuf\")" ;
while(x=eval(x));
//-->
//]]>
</script>contact#redcello.co.uk
</h4>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h4><small class="white"><a target="_self" href="http://www.redcello.co.uk/index.php?option=com_rsform&view=rsform&formId=6" style="color:#FFFFFF;">Click here for a call back</a></small></h4>
</div>
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2" style="padding-top:20px;">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://twitter.com/RedcelloUK">
<i class="icon ion-social-twitter ion-3x white"></i>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://www.linkedin.com/company/redcello">
<i class="icon ion-social-linkedin ion-3x white"></i>
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="about-icon" style="display:block; width:100%;">
<a target="_blank" href="https://www.facebook.com/RedcelloUK">
<i class="icon ion-social-facebook ion-3x white"></i>
</a>
</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</section>
Sorry for the bunch of code - I wanted to make sure I got everything that is needed to help. After trying multiple times - I cannot for the life of me solve this. Any help is much appreciated.
Change the #contact z-index:1 to z-index:-1;
#contact {
background-position: center 0%;
background-size: cover;
background-repeat: no-repeat;
background-image: url(../img/bg_8.jpg);
display: table;
width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: hidden;
vertical-align: middle;
z-index: -1;
color: #121212;
}
This will get the image behind the text (one layer behind).
Reference
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I added a hover effect on a button. The code effect worked perfectly until I added some PHP code inside my page. Everything except the hover effect is working fine. It tried to understand the problem by using console but got no hint.
Here's my code:
CSS:
#secondary-content
{
position: relative;
top: 100vh;
}
#write-blog
{
position: relative;
top: -50%;
z-index: 3;
}
.ghost-button
{
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
}
.ghost-button:hover, .ghost-button:active
{
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
Here's the code inside my body:
<div class="slider fullscreen" data-indicators="false">
<ul class="slides">
<li>
<img src="Includes/images/map2.jpg">
<div class="caption left-align">
<h3 class="light white-text">History doesn't repeats itself,<br>but it does rhyme.</h3>
</div>
</li>
<li>
<div class="caption right-align">
<h1 class="light white-text">First solve the problem.<br>Then, write the code.</h1>
</div>
<img src="Includes/images/sublime_text.jpeg"> <!-- random image -->
</li>
<li>
<div class="caption center-align">
<h4 class="light white-text">Art speaks where words are unable to explain.</h4>
</div>
<img src="Includes/images/art1.jpg">
</li>
<li>
<img src="Includes/images/music2.jpg">
<div class="caption right-align">
<h5 class="light grey-text text-lighten-3">Where words fail, Music speaks.</h5>
</div>
</li>
<li>
<div class="caption left-align">
<h4 class="light white-text">Science is the poetry of<br>reality.</h4>
</div>
<img src="Includes/images/science.jpg"> <!-- random image -->
</li>
</ul>
<div id="write-blog" class="center-align">
<a class="ghost-button" href="">WRITE A BLOG</a>
</div>
</div>
<div id="secondary-content">
<div class="container">
<?php
$blog = DB::getInstance()->get('blogs', array('deletion_status', '=', '0'));
if($blogs = $blog->fetchRecords(2))
{
foreach($blogs as $blog)
{
$date=strtotime($blog->created_on); // changing the format of timestamp fetched from the database, converting it to milliseconds
echo
"<div class='section'>
<div class='row'>
<div class='col s2'>
<blockquote>".
date('M', $date)."<br>".
date('Y d', $date).
"</blockquote>
</div>
<div class='col s8'>
<h5>".ucfirst($blog->title)."</h5>
<h6>".ucfirst($blog->description)."</h6><br>
<div class='row'>
<div class='col s1'>
<i class='material-icons' style='color:grey'>remove_red_eye</i>
</div>
<div class='col s1'>
{$blog->views}
</div>
<div class='col s1 offset-s2'>
<i class='material-icons' style='color:grey'>thumb_up</i>
</div>
<div class='col s1'>
{$blog->likes}
</div>
<div class='col s1 offset-s2'>
<i class='material-icons' style='color:grey'>thumb_down</i>
</div>
<div class='col s1'>
{$blog->dislikes}
</div>
</div>
<div class='divider'></div>
</div>
</div>
</div>";
}
}
?>
</div>
<script src="Includes/js/jquery.min.js"></script>
<script type="text/javascript" src="Includes/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.slider').slider();
});
</script>
The code below the div having id 'secondary-content' is also working fine. What wrong am I doing here?
<div class="col-lg-4 col-sm-6">
<a href="#" class="portfolio-box">
<img src="img/portfolio/1.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category:-
</div>
<div class="project-name">
Mobile
</div>
</div>
</div>
</a>
</div>
//1.jpg image is appearing in the view i want to switch to another view after clicking on this image.
You can achieve this with css:
#my-div{
background-color: #000;
width: 200px;
height: 200px }
a.fill-div {
display: block;
height: 100%;
width: 100%;
text-decoration: none}
<div class="col-lg-4 col-sm-6" id="my-div">
the rest of it.
</div>