jquery opening one section at once - javascript

I am currently working on laravel 5.2.I am trying to make a comment section for each post.Here's my blade view,
`
<div class="row">
<section class="col-md-12">
#foreach($storages as $storage)
#if($storage->post_id==$post->id)
<div id="jumbo3" class="jumbotron">
<div class="row" id="rlr">
<section class="col-md-offset-1 col-md-2">
<img id="imagesize8" class="img-circle" src="/src/uploads/avatars/{{$storage->user->avatar}}"/>
</section>
<section class="col-md-3">
<a id="user10" href=""><h5 id="h52">{{$storage->user->getNameOrUsername() }}</h5></a>
</section>
<section class="col-md-offset-3 col-md-3">
<span id="rmvsgn1" class="glyphicon glyphicon-remove-sign"></span>
</section>
</div>
#if($storage->comment==0)
<div class="row">
{{ $storage->textcomment}}
</div>
#endif
#if($storage->textcomment==0)
<div class="row">
<img src="{{$storage->comment}}"/>
</div>
#endif
#endif
#endforeach
</section>
</div>
<button class="see-more">See Comments</button>
</div>
</div>
#endif
#endforeach
I am trying to display the comments by clicking on the comment section,here's my jquery,
<script>
$(document).ready(function () {
$('.jumbotron').hide('.jumbotron');
$('.see-more').click(function () {
$('.jumbotron').toggle('.jumbotron');
});
});
</script>
but every time I am trying to get it for one section,it opens up for all posts.


$(document).ready(function() {
$(".see-more").click(function(){
$(this).prev( ".content" ).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="article">
<div class="content">
Content 1
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 2
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 3
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 4
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 5
</div>
<button class="see-more">
See more
</button>
</div>
<div class="article">
<div class="content">
Content 6
</div>
<button class="see-more">
See more
</button>
</div>
</body>
</html>

Related

Migrate jquery slick carousel to vue-slick-carousel

I have a page having a carousel implemented using slick-carousel and jquery but I'm building this page in vue. Everything else works while migrating this carousel from jquery to vue except for the image itself which doesn't show up. I've been hacking at this for about three hours with no luck.
Heres the code for the carousel:
Jquery:
<div class=" petmark-slick-slider home-slider" data-slick-setting='{
"autoplay": true,
"autoplaySpeed": 8000,
"slidesToShow": 1,
"dots": true
}'>
<div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>
<h4 class="mt--30">package just Rs 399</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
<div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">Flat </span> 20% <br> off</h2>
<h4 class="mt--30">on all online bookings</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
</div>
Vue:
In template
<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
<div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>
<h4 class="mt--30">package just Rs 399</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
<div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">Flat </span> 20% <br> off</h2>
<h4 class="mt--30">on all online bookings</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
</VueSlickCarousel>
In script
import VueSlickCarousel from 'vue-slick-carousel'
export default {
name: 'Home',
components: { VueSlickCarousel }
}
Any idea what I did wrong?

I found another question that solved this. Basically just change the code as follows:
<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
<div class="single-slider home-content bg-image" v-bind:style="{'backgroundImage': 'url(\'image/slider-2.jpg\')'}">
...
...

jQuery remove text from h1

I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});

you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node

html2canvas some is working some no

I have a problem,and I don`t understand.. absolute..
So I tried to use html2canvas.js. I want to render html to img. The content is in modal. Till here no any problems.
When I try to render that area what I want the toDataUrl() is empty.
But when I try to render a simple button,its working!
Both of is in a Modal. My code:
<div class="modal-body ">
<div class="print" id="printDiv">
<div class="rows nopm">
<div class="full">
<div class="head">
Make & Model
</div>
<div class="data">
{{$data['make']}} {{$data['model']}}
</div>
</div>
</div>
<div class="rows nopm">
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/age.png')}}"> Age
</div>
<div class="data">
{{Carbon\Carbon::parse($data['age'])->format('m/Y')}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/enginesize.png')}}"> Engine Size
</div>
<div class="data">
{{$data['eng_size']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/vrt.png')}}"> VRT
</div>
<div class="data">
{{Carbon\Carbon::parse($data['vrt_date'])->format('m/Y')}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/power.png')}}"> Power
</div>
<div class="data">
{{$data['eng_hp']}}PS ({{$data['eng_kw']}}KW)
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/roadlicence.png')}}" > Road tax
</div>
<div class="data">
{{$data['vrt_price']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/fuel.png')}}" > Fuel
</div>
<div class="data">
{{$data['fuel']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/mileage.png')}}" > Mileage
</div>
<div class="data">
{{$data['mileage']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/transmission.png')}}"> Transmission
</div>
<div class="data">
{{$data['trans']}}
</div>
</div>
</div>
<div class="rows nopm">
<div class="quatrohead">
Extras
</div>
<div class="quatro">
#foreach($data_extra as $extra)
#if ($loop->last)
{{$extra}}
#else
{{$extra}},
#endif
#endforeach
</div>
<div class="quatrohead">
Price
</div>
<div class="quatroless">
€{{$data['price']}}
</div>
</div>
</div>
</div>
<div id="targetCanvas">
<img class="imageCanvas" src="">
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>
<button type="button" class="btn btn-default" id="print">Print</button>
</div>
</div>
</div>
</div>
<script>
$('#printModal').on('shown.bs.modal', function (e) {
html2canvas($('#print'), { //like that its working ,with #printDiv no
onrendered: function (canvas) {
theCanvas = canvas;
console.log(theCanvas.toDataURL());
document.querySelector('.imageCanvas').src = theCanvas.toDataURL();
}
});
})

Place your script in
$(window).load(function (){
//Your script here
})
Or you could try with
setTimeout(function (){
html2canvas($('#print'), { //like that its working ,with #printDiv no
onrendered: function (canvas) {
theCanvas = canvas;
console.log(theCanvas.toDataURL());
document.querySelector('.imageCanvas').src = theCanvas.toDataURL();
}
});
},1000)

How to merge multiple Backbone collection divs into one (To fix the HTML layout)

I am working on a backbone collection view. Collections are shown as rows using a div. Each row contains child views (cells).
My problem is, I need to make it appear as if there's only one collection, that is, the cells will be merged together into a single parent div. Please see my illustration below:
Markup:
<div class="team-container container" data-view="Sports.View">
<div class="team-row clearfix" data-view="Athletes.View">
<div class="col-sm-8 team-row">
<h1>Surf</h1>
</div>
<div class="col-sm-8 team-cell">
<div class="va-container-anchor">
<div class="feat-image"><img src="http://us.billabong.sb1.sandbox.netsuitestaging.com/assets-bbg/images/content/laura-enever.jpg" alt="" class="fit-team-image"></div>
<div class="va-container-hover">
<a href="/team/laura-enever" data-hashtag="#team/laura-enever" class="holder">
<div class="content">
<div class="text"> Laura Enever </div>
</div>
</a>
</div>
<div class="copy-block">
<small>Pro Surf</small>
<h2>Laura Enever</h2>
<a class="btn btn-primary btn-lg btn-block" href="/team/laura-enever" data-hashtag="#team/laura-enever">Explore</a>
</div>
</div>
</div>
<div class="col-sm-8 team-cell">
<div class="va-container-anchor">
<div class="feat-image"><img src="/images/content/laura-enever.jpg" alt="" class="fit-team-image"></div>
<div class="va-container-hover">
<a href="/team/laura-enever-2" data-hashtag="#team/laura-enever-2" class="holder">
<div class="content">
<div class="text"> Laura Enever </div>
</div>
</a>
</div>
<div class="copy-block">
<small>Pro Surf</small>
<h2>Laura Enever</h2>
<a class="btn btn-primary btn-lg btn-block" href="/team/laura-enever-2" data-hashtag="#team/laura-enever-2">Explore</a>
</div>
</div>
</div>
<div class="col-sm-8 team-cell">
<div class="va-container-anchor">
<div class="feat-image"><img src="/images/content/courtney_conlogue_profile.jpg" alt="" class="fit-team-image"></div>
<div class="va-container-hover">
<a href="/team/courtney-conlogue" data-hashtag="#team/courtney-conlogue" class="holder">
<div class="content">
<div class="text"> Courtney Conlogue </div>
</div>
</a>
</div>
<div class="copy-block">
<small>Pro Surf</small>
<h2>Courtney Conlogue</h2>
<a class="btn btn-primary btn-lg btn-block" href="/team/courtney-conlogue" data-hashtag="#team/courtney-conlogue">Explore</a>
</div>
</div>
</div>
</div>
<div class="team-row clearfix" data-view="Athletes.View">
<div class="col-sm-8 team-row">
<h1>Snow</h1>
</div>
<div class="col-sm-8 team-cell">
<div class="va-container-anchor">
<div class="feat-image"><img src="/images/content/helen_profile.jpg" alt="" class="fit-team-image"></div>
<div class="va-container-hover">
<a href="/team/helen-schettini" data-hashtag="#team/helen-schettini" class="holder">
<div class="content">
<div class="text"> Helen Schettini </div>
</div>
</a>
</div>
<div class="copy-block">
<small>Pro Snow</small>
<h2>Helen Schettini</h2>
<a class="btn btn-primary btn-lg btn-block" href="/team/helen-schettini" data-hashtag="#team/helen-schettini">Explore</a>
</div>
</div>
</div>
</div>
</div>
Any help would be greatly appreciated.

Bootstrap 3 Collapse on hover

I'm working on this site here. http://opennetsummit.wpengine.com/
The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.
What do I need to change?
<script>
$(".paneltab1").hover(
function() {
$('#collapsePanel1').collapse('show');
}, function() {
$('#collapsePanel1').collapse('hide');
}
);
</script>
<div class="row panel-heading">
<div class="container">
<div class="col-xs-3">
<a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
<h3>Workshops</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
<h3>Open Networking Summit</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
<div class="panel-tabs">
<div>
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
<h3>Webinars</h3>
</div>
</div>
</a>
</div>
<div class="col-xs-3 ">
<div class="panel-tabs">
<div class="mid-form">
<h3>Get Updates</h3>
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel1">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Defy Protocol </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel2">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 2 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel3">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 3 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>

You can use jquery's hover along with bootstrap's collapse javascript, something like this:
$(".panel-tabs").hover(
function() {
$('#collapsePanel3').collapse('show');
}, function() {
$('#collapsePanel3').collapse('hide');
}
);
The first function(){} is for when the mouse enters, the second for when it leaves.
More info here:
http://api.jquery.com/hover/
http://getbootstrap.com/javascript/#collapse-methods

I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.
document.getElementById("panelid").className = "collapse in";

Categories