I created jquery dropdown menu in slider. and wants to change its view state like ""https://jsfiddle.net/user23435/tzrunfjd/1/"" and i added slide effect on dropdown menu like this https://ibb.co/QdRWqRy . If I click on one slide it opens but by clicking other slide the previousone close and then by clicking it again it opens,,,,,,,,How can i apply this https://jsfiddle.net/user23435/tzrunfjd/1/ into my code which is given below
html code:
<div class="carousel slide col-md-10 col-xs-12" data-ride="carousel" data-interval="false"
id="myCarousel">
</div>
jQuery Code:
$('.create-meeting-btn').click(function(){
$('.create-meeting-form').stop().slideToggle(); //stop or delay(1000)
});
$('.upcoming-btn').click(function(){
$('.upcoming-table').stop().slideToggle();
});
$('.completed-btn').click(function(){
$('.completed-table').stop().slideToggle();
});
$('#myCarousel').carousel({
pause: true,
interval: false,
});
function setMeetingCarausel() {
let meetingsCopy = utils.setSliders(Array.from(meetings));
let html = '<div class="carousel-inner no-padding">';
meetingsCopy.map((meeting, index) => {
html += `<div class="item ${index === 0 ? 'active' : ''}">`;
meeting.map(m => {
let className = m.status === 'completed' ? 'btn btn-warning btn-lg dashboard-icon' : 'btn btn-success
btn-lg dashboard-icon'
html += `
<div class="col-md-3 col-sm-6 col-xs-12" onclick="handleClickMeetingItem('${m._id}')">
<span href="" class="${className}" style="width: 200px; height: 150px;">
<p style="padding-top: 10px; font-size: 19px; font-weight: bold;">${m.subject}</p>
<p style="padding-top: 12px; font-size: 19px; font-weight: bold;">${utils.convertDate(m.date)}</p>
<p style="padding-top: 10px; font-size: 19px; font-weight: bold;">( ${m.status} )</p>
</span>
</div>
`;
});
html += `</div>`;
})
html += `
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" style="margin-left:63px; color:grey;"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" style="margin-right:140px; color:grey;"></span>
</a>
`;
$('#myCarousel').html(html);
}
Use jsfiddle link html code in your jquery html variable as you want but be careful about its class names because these classes handle the functionality and use this mainmenu function in script tag as it.
function mainmenu(){
jQuery(".topm").click(function(){
jQuery('.content').slideUp("fast");
jQuery(this).find('.content').slideDown("fast");
});
}
but call this mainmenu function in the end of your setMeetingCarausel function. This mainmenu function call inside the setMeetingCarausel not outside.
jQuery(document).mouseup function use as it, in the end of script tags.
Related
I'm working image gallery page Sitecore MVC platform.
The razor page I'm working on have should display first 8 image only on default. When user click the load more button. It'll display all images.
The first 8 image would be stack and it should be in columns of 4. The rest of the images should be 4 across and expand downwards when the Load More button is clicked
I decided to use 2 Divs and JavaScript to achieve the Load More function. E.g One div is show 8 and the other to show all.
The first 8 is showing with the correct styling but when I hide and show the other div with exact same style its not being render correctly. Instead of 4 columns they are all stack into 1.
Please help.....
#{
//to handle id must start with letter compatibility. HTML5 removed this restriction tho
var minimisedDivId = ENU.SitecoreHelper.Resources.HTMLHelpers.EnsureGuidStartsWithLetter(Guid.NewGuid());
var loadMoreDivId = ENU.SitecoreHelper.Resources.HTMLHelpers.EnsureGuidStartsWithLetter(Guid.NewGuid());
}
<head>
<script>
function toggleDiv() {
var minimised = document.getElementById("#minimisedDivId");
var loadMore = document.getElementById("#loadMoreDivId");
if (minimised.style.display === "none") {
minimised.style.display = "block";
loadMore.style.display = "none";
} else {
minimised.style.display = "none";
loadMore.style.display = "block";
}
}
</script>
<style>
.imagegallery-container {
margin: 0px;
padding: 0px;
position: relative;
text-align: center;
}
.imagegallery-area {
margin: 0px;
padding: 0px;
}
.imagegallery {
margin: 0px;
padding: 0px;
}
.image-area {
/* margin: 0px;
padding: 0px;*/
}
.thumbnail {
margin: 0px;
padding: 0px;
}
.imageText {
position: relative;
bottom: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
.loadMore {
margin: 0 auto; /*center*/
}
</style>
</head>
<div class="row imagegallery-container">
<div class="col"> </div>
<!-- TODO: Load first 8 -->
<div class="imagegallery-area row col-8" id="#minimisedDivId">
#if (Model.IsInEditMode)
{
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
<span class="col-3 editor">
#Html.Glass().Editable(item.value, x => x.Thumbnail)
</span>
}
}
#if (Model.Children.Any())
{
<!-- TODO: I need to take the first 8 of and display them-->
foreach (var item in Model.Children.ToList().Take(8).Select((value, index) => new { value, index }))
{
<a class="col-3 thumbnail" data-toggle="modal" data-target="#carouselModal" style="border:2px red">
#*<img src="#item.value.ThumbnailUrl" />*#
#Html.Glass().RenderImage(item.value, x => x.Thumbnail, new { w = 200, h = 200, mw = 200, mh = 200 }, isEditable: true)
<div class="imageText">#Html.Glass().Editable(item.value, x => x.Text)</div>
</a>
}
}
<div class="loadMore">
<button onclick="toggleDiv()">LOAD MORE</button>
</div>
</div>
<!-- TODO: Load all -->
<div class="imagegallery-area row col-8" id="#loadMoreDivId" style="display:none;">
#if (Model.IsInEditMode)
{
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
<span class="col-3 editor">
#Html.Glass().Editable(item.value, x => x.Thumbnail)
</span>
}
}
#if (Model.Children.Any())
{
// Display max of 8 items, 4 across and stacking to 2
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
//Carousel should have a closed button,top right. Image number buttom right e.g 1 of 8
<a class="col-3 thumbnail" data-toggle="modal" data-target="#carouselModal" style="border:2px red">
<img src="#item.value.ThumbnailUrl" />
#Html.Glass().RenderImage(item.value, x => x.Thumbnail, new { w = 200, h = 200, mw = 200, mh = 200 }, isEditable: true)
<div class="imageText">#Html.Glass().Editable(item.value, x => x.Text)</div>
</a>
}
}
<div class="loadMore">
<button >Collapsed</button>
</div>
</div>
<!-- TODO: I would then display all the elements if LOAD MORE is clicked -->
<!-- LOAD MORE-->
<!-- This would show all the rows-->
<!-- Modal -->
<div class="modal fade" id="carouselModal" tabindex="-1" role="dialog" aria-labelledby="carouselModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselControls" data-slide-to="0" class="active"></li>
<li data-target="#carouselControls" data-slide-to="1"></li>
<li data-target="#carouselControls" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
#if (Model.Children.Any())
{
//get the first imageItem for "active" class
<div class="carousel-item active">
<img class="d-block w-100" src="#Model.Children.ToList().First().ImageUrl" alt="#Model.Children.ToList().First().Title" />
<div class="imageText">#Model.Children.ToList().First().Text)</div>
</div>
Model.Children.ToList().Skip(1);
//The carry on the rest in the look with no active
foreach (var item in Model.Children.ToList().Select((value, index) => new { value, index }))
{
<div class="carousel-item">
<img class="d-block w-100" src="#item.value.ImageUrl" alt="#item.value.Title" />
<div class="imageText">#Html.Glass().Editable(item.value, x => x.Text)</div>
</div>
}
}
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer">
x of x
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col"> </div>
</div>
Try editing this row (in both locations):
div class="imagegallery-area row col-8"
And move row into its own div:
div class="imagegallery-area col-8"
div class="row">
A div should be a row or a col, not both.
I can not run my like counter in javascript.
The replacement of the empty heart with the full one works properly but the counter update no. Can someone help me? Thank you
$query2 = mysql_query("SELECT * FROM totlike WHERE id_user_like = $id_user AND id_post_like = ". $risultato['id']."");
if(mysql_num_rows($query2) ==1) {
$like='<i class="glyphicon glyphicon-heart" id="'. $risultato['id'] .'"></i>';
} else {
$like='<i class="glyphicon glyphicon-heart-empty" id="'. $risultato['id'] .'"></i>';
}
echo '<div class="list" id="list_'. $risultato['id'] .'">
<div class="panel panel-default">
<div class="btn-group pull-right postbtn">
<button type="button" class="dotbtn dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="dots"></span> </button>
<ul class="dropdown-menu pull-right" role="menu">
<li>Segnala</li>
'. $delete .'
</ul>
</div>
<div class="col-md-12">
<div class="question" id="question8025"><div class="img imgLiquid imgLiquid_bgSize imgLiquid_ready" style="width: 60px; height: 60px; margin: 0px auto; background-image: url("download.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;"><img src="download.jpg" id="questionavatar" style="display: none;"></div>
<div class="media-body">
<h4 class="media-heading">'. $risultato['username'] .'<br>
<small><i class="fa fa-clock-o"></i> Yesterday, 2:00 am</small> </h4>
<p><h4>'. $status = nl2br($risultato['post']) .'</h4></p>
<ul class="nav nav-pills pull-left ">
<li>'.$like.' '.$risultato['total_like'].'</li>
</ul>
</div>
</div>
</div>
</div>
</div>';
and then
function like(id_post, tot_like) {
$.ajax({
type: "POST",
url: '../ajax/like.php',
data:{id_post:id_post},
complete: function() {
var elem = $('#'+id_post).attr('class');
if (elem=="glyphicon glyphicon-heart") {
$('#'+id_post).removeClass('glyphicon glyphicon-heart').addClass('glyphicon glyphicon-heart-empty');
$('#'+id_post).text(tot_like - 1);
} else {
$('#'+id_post).removeClass('glyphicon glyphicon-heart-empty').addClass('glyphicon glyphicon-heart');
$('#'+id_post).text(tot_like + 1);
}
}
});
When I click the counter goes to -1 or +2
You must have a refresh after you update by clicking on +1 or -1 which you are not doing it.
Also you must do ++ or -- which will be better.
1º Get the total likes, 2º show them as you are doing till now, 3º update which the user action, 4º get again refreshing o just update DOM object with +1 or -1 but will be quite useless and there may occur some error soon or mistake.
I have a little problem. Im trying to create my own slider using jQuery and some css/javascript.
I got my slider to work moving a Div 660px to the left and right by clicking a button.
But, I would like to have the right button disabled when the left margin is 0. And I would like the whole div to rewind back to 0px after some clicks.
Is this possible?
Here is my code:
<script language="javascript">
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
}
</script>
<div class="container">
<div class="row">
<div class="contr-left">
<a type="button" value="Move Left" onclick="example_animate('-=600px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
</div>
<div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
<div class="wrapper-outer">
<div class="wrapper-inner" id="slide">
<?php get_template_part('loop-reviews');?>
</div>
</div>
<div class="contr-right">
<a type="button" value="Move Right" onclick="example_animate('+=600px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
</div>
The code im using is from this page: Page
Well, with the code from Rayn i got the button to hide, but now it won't show when left-margin is 1px or something. So I'm trying this now: (doesn't work btw)
Im trying this now: (doesn't work btw)`function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft == '0px'){
$('.contr-right').hide();
} else (slidemarginleft == '1px') {
$('.contr-right').show();
}
}`
Also I'm seeing that the margin-left isn't set in the style sheet but in the
<div style="margin-left:0px">content</div>
You can do an if statement after each click to check if the element has 0px
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft == '0px'){
$('.contr-right').hide();
}
}
Use this
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
if($('.xman').css("marginLeft")=='0px'){
$('.contr-left').attr('disabled',true);
}
}
Disable Button when margin-left: 0px
You can use jquery's .prop() method to disable a button if a condition is met. Here is an example (in pseudo code):
function disableButton() {
$(element).prop('disabled', true);
}
function checkMargin() {
if ($(element).css("margin") === 0) {
disableButton()
}
}
checkMargin()
Rewind to 0px after some clicks
Here, I'd just set a count for clicks and trigger a function when it meets the threshold you want. Pseudo code:
var threshold = 5
var clicks = 0
$(element).click(function(){
clicks++
if (clicks === 5) {
rewind();
}
clicks - 5
})
function rewind() {
$(element).css( "margin", "0" );
checkMargin()
}
Here is my working code, thanks for all the help:
<script>
function example_animate(px) {
$('#slide').animate({
'marginLeft' : px
});
var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
if(slidemarginleft < '-3000px'){
$('#slide').animate({marginLeft: '0px'}, 400);
}
var hide = $('#slide').css('margin-left'); //this gets the value of margin-left
if(hide >= '-50px'){
$('.contr-left').addClass('showMe');
}
var hideMe = $('#slide').css('margin-left'); //this gets the value of margin-left
if(hideMe <= '-50px'){
$('.contr-left').removeClass('showMe');
}
}
</script>
<!-- /Review script -->
<section id="reviews">
<div class="container">
<div class="row">
<div class="container">
<div class="row">
<h4>Reviews</h4>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-1" style="width:40px;">
<div class="row">
<div class="contr-left">
<a type="button" value="Move Left" onclick="example_animate('+=510px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
<div class="col-sm-10">
<div class="row">
<div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
<div class="wrapper-outer">
<div class="wrapper-inner" id="slide" style="margin-left:0px;">
<?php get_template_part('loop-reviews');?>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-1" style="width:40px;">
<div class="row">
<div class="contr-right">
<a type="button" value="Move Right" onclick="example_animate('-=510px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
</div>
</div>
</div>
</div>
<div class="btn btn-06">Bekijk alle reviews</div>
</div>
</section>
I built a Reddit clone in Angular and Rails following this guide. I've been playing around with the CSS to get the upvote and downvote arrows in the right spot. I guess overriding the Bootstrap wasn't a good idea because I can't seem to get my ng-click to fire when I click the arrow anymore (it worked fine before, didn't change the js at all). Here's the relevant bits:
HTML:
<div class="row">
<div class="col-md-1 small-right-gutters small-col">
<div class="row">
<div class="col-md-1 small-right-gutters">
<div class="glyphicon glyphicon-arrow-up" ng-click="addUpvote(post)"></div>
<div class="glyphicon glyphicon-arrow-down"></div>
</div>
<div class="col-md-1 vert-center">
{{post.upvotes}}
</div>
</div>
</div>
<div class="col-md-9 big-col vert-center">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</div>
<div class="col-md-2 text-right">
<div>
<small>{{ post.comments.length }} comment<span ng-hide="post.comments.length==1">s</span></small>
</div>
<div>
<small>posted by <a ng-href="#/users/{{post.user.username}}">{{post.user.username}}</a></small>
</div>
</div>
</div>
CSS:
.small-right-gutters {
padding-right: 2px;
}
.small-col {
width: 40px;
}
.big-col {
width: 925px;
font-size:20px;
margin-left: 10px;
}
.vert-center {
height: 40px;
line-height: 40px;
}
Angular controller:
$scope.addUpvote = function (post) {
postFactory.upvotePost(post);
};
$scope.addDownvote = function (post) {
postFactory.downvotePost(post);
};
Angular factory:
upvotePost: function(post) {
return $http.put('/posts/' + post.id + '/upvote.json').success(function (data) {
post.upvotes += 1;
});
},
downvotePost: function(post) {
return $http.put('/posts/' + post.id + '/downvote.json').success(function (data) {
post.upvotes -= 1;
});
},
Any ideas why this is happening?
If you add z-index: 1; on your .glyphicon it works!
I am using twitter bootstarp carousel in my web page. I need to show the title of next item on mouse over over the next arrow.
Html:
<div id="carousel-example-generic" class="carousel slide homecarousel" data-ride="carousel">
<!-- FIRST for slide -->
<div class="carousel-inner">
<div class="item active" title="Adult">
slider 1
</div>
<div class="item" title="Baby">
slider 2
</div>
<div class="item" title="Ingredients">
slider 3
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev" ><img src="images/arrow_left.png" alt=""></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next" ><img src="images/arrow_right.png" alt=""></a>
</div>
</div>
How to achieve this? Any help would be appreciated. Thanks.
Something like this? :
$('.carousel-control').on('mouseover', function() {
var titles = $('.carousel-inner .item').map(function(){ return this.title; });
var currentIndex = $('.carousel .active').prevAll('.item').length;
var title = titles[currentIndex + 1 > titles.length -1 ? 0 : currentIndex + 1];
if ($(this).hasClass('left')) {
title = titles[currentIndex - 1 < 0 ? titles.length - 1 : currentIndex - 1];
}
$(this).attr('title', title);
});
Fiddle