I have a page with image scrolling and I'm using Flexslider to do that.
Now the images are based on date sorting - So I click on last 7 days - it displays me last 7 day images (data is sent and received via AngularJS).
Now. The data returned as JSON is received is - Okay.
The problem is when data is returned and updated in the view via FlexSlider - The Flexslider is updated with the new data but the width of the flexslider remains according to the maximum elements that were previously present.
Why is that? Could somebody help?
<div class="recent_uploads mar_btm" ng-controller="recentuploadsController">
<div class="mar_btm titl_img"><h6>Recent Uploads</h6><!--<img alt="recent uploads" src="<?php echo base_url();?>public/image/net03.png">--></div>
<input type="text" ng-model="search.text" class="community-searching hide">
<button ng-click="clearSearch()" class="hide">clear</button>
<div class="rec_uplist_cont">
<div class="rec_uplist_slider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 800%; transition-duration: 0.6s; transform: translate3d(-240px, 0px, 0px);">
<div class="recnt_info" ng-if="recentupload!=null"><p> No Data Found</p></div>
<li id="apptest" style="width: 226px; float: left; display: block;" class="animate-repeat" ng-repeat="recentupload in recentuploads | filter:search.text">
<div class="rec_uplist" >
<div class="recnt_info">{{recentupload.user}} <span class="timeago" title="{{recentupload.time}}">{{recentupload.time}}</span></div>
<img width="226" ng-click="showvideo(recentupload.id)" height="127" src="http://img.youtube.com/vi/{{recentupload.embededCode}}/0.jpg" />
<a href="#" ng-click="showvideo(recentupload.id)" >{{recentupload.vtitle}}</a>
</div>
</li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="flex-active">2</a></li></ol><ul class="flex-direction-nav"><li>Next</li><li>Previous</li></ul></div>
</div>
</div>
Try to detach or remove flexslider from DOM and after that initialize for the new gallery.
More info on how to remove flexslider HERE
Related
Can someone help me hide / show the information when I click on the icon (arrow). I tried to use javascript, although it is not the best way, but it also didn't work.
I intend that by clicking on the image https://img.icons8.com/android/24/000000/down.png, the information below will be hidden and that image will change to the image of the upward facing arrow https://img.icons8.com/android/24/000000/up.png
When you click on the up-facing sta the information appears again and that same image is replaced by the downward-facing arrow image.
Can someone help me?
DEMO - STACKBLITZ
CODE
<div *ngFor="let item of data">
<div class="d-flex flex-row"
style="align-items: center;margin-top: 8px;padding: 16px;background: #E8EEF5 0% 0% no-repeat padding-box;border-radius: 8px;">
<div>
<img src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
</div>
<div><span style="margin-left: 8px;" class="selectioname">{{item.name}}</span></div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material-outlined/24/000000/close-window.png"/>
</div>
</div>
<div class="d-flex flex-row"
style="display: flex; align-items: center; margin-top: 8px;padding: 8px;border-bottom: 1px solid #CACED5;">
<div class="">
<img src="https://img.icons8.com/bubbles/50/000000/check-male.png"/>
</div>
<div>
<span style="margin-left: 8px;">#{{item.name}}</span>
<div>{{item.date}}</div>
</div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material/24/000000/filled-trash.png"/>
</div>
</div>
</div>
First of all, remove your styles for hide1 class. It's better to rely on *ngIf directive in Angular:
<img *ngIf="item.shown" src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img *ngIf="!item.shown" src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
Then implement method to toggling shown property:
toggle(item) {
item.shown = !item.shown;
}
Now you have to bind this method to DOM event on div wrapping your arrows:
<div (click)="toggle(item)">
</div>
And final step is to use *ngIf directive on other element you want to toggling:
<div class="d-flex flex-row" *ngIf="item.shown" ...
HTML5 introduced a <summary> and <details> tag to allow you to toggle information.
Here's an example:
<details>
<summary>Information you want shown</summary>
<p>Information you want toggled</p>
</details>
I have been adding ticket sales to our home page but it has dramatically slowed down the site. We have about 1250 shows for this season and even though adding this to the home page sales has gone up but people are complaining about the speed.
Currently I'm using the javascript:showhide to hold the ticket purchase information in a hidden div that shows when you click buy tickets.
I would like to have it NOT run anything in the hidden div unless the buy tickets button is click. Then it would pull the ticketing information and populate the div.
We will have about 300 of the ticketing scripts on the page at one time like Show1-Oct, Show2-Oct, Show3-Oct, Show1-Nov, Show2-Nov, Show3-Nov and so on.
Any ideas or help is greatly appreciated.
<div class='topShow bg-Show-Main'>
<a href='Show1.php'><img alt='Show1' title='Show1' src='images/show/Show1.jpg'>
<p class='title'>Show1</p>
<p>Opens October 30th</p>
</a>
<div class='btnContainer2'>
<a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show1.php'>More info</a>
<a class='btn2 red' style="text-align: right; width:50%; display: inline-block;" href="javascript:showhide('Show1-Oct')">Buy Tickets</a>
</div>
<div id="Show1-Oct" style="display:none;">
<script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=15&locale=1"></script>
</div>
<div class='clear'></div>
</div>
<div class='topShow bg-Show-Main'>
<a href='Show2.php'><img alt='Show2' title='Show2' src='images/show/Show2.jpg'>
<p class='title'>Show2</p>
<p>Opens October 31st</p>
</a>
<div class='btnContainer2'>
<a class='btn1' style="text-align: left; width:49%; display: inline-block;" href='Show2.php'>More info</a>
<a class='btn2 red' style="text-align: right; width:50%; display: inline-block;" href="javascript:showhide('Show2-Oct')">Buy Tickets</a>
</div>
<div id="Show2-Oct" style="display:none;">
<script type="text/javascript" src="http://website.com/booking/index.php?controller=FrontEnd&action=ActionLoad&theme=10&view=list&icons=T&cid=16&locale=1"></script>
</div>
<div class='clear'></div>
</div>
Loading up a separate javascript file for each element on the page is a really bad idea.
A more sane design would be to have a single script that makes an ajax call for the necessary data for each listing when needed (when the user clicks that 'buy tickets' button) and injects it into the page. Something along these lines: (some extraneous HTML removed from your sample code, but you'll get the idea)
$('.btn2').on("click", function() {
var myId = $(this).parent().next().attr("id"); // or store this as a data attribute on the button or somewhere else conveniently accessible
console.log("Get data for ", myId);
$.get("/whatever?id=" + myId, function(response) {
// assuming that ajax call returns html, just inject it into the div:
$('#" + myId').html(response);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topShow bg-Show-Main'>
<div class='btnContainer2'>
<a href="#" class='btn2 red'>Buy Tickets</a>
</div>
<div id="Show1-Oct">
</div>
<div class='clear'></div>
<div class='btnContainer2'>
<a href="#" class='btn2 red'>Buy Tickets</a>
</div>
<div id="Show2-Oct">
</div>
<div class='clear'></div>
</div>
When I apply Javascript on Below code it effect on only first image only first image size is change even my mouse is hovering over any image
<div class="container">
<div class="row">
#foreach( $gigs as $gig )
<div class=" col-lg-3 col-md-3 col-sm-6 col-xs-12 gigbox">
<div class="panel panel-default" style="height: 285px">
<img src="{{URL::asset($gig->image)}}" id="img" width="100%" onmouseover="changesize()" height="160" alt="">
<ul class="skillUl">
<li class="gigtitle" style="list-style: none"> I will {{$gig->gigtitle}}</li>
<a class="startingFrom" href="{{route('gig',['gig_id'=>$gig->id, 'gig_title'=>$gig->gigtitle])}}">Starting From <Span class="price"> Rs {{$gig->price}}</Span></a>
</ul>
</div>
</div>
#endforeach
</div>
</div>
javaScript Code is here
<script>
function changesize() {
document.getElementById("img").style.width = "130px";
}
</script>
css sample
img { transition: all .2s ease-in-out; }
img:hover { transform: scale(1.1); }
You are using a loop to create multiple elements with id="img". ids are supposed to be unique on any given page. You should instead use class="img" and use the getElementsByClassName() method:
document.getElementsByClassName("img").style.width = "130px";
You also should consider Frank Wisniewski's suggestion to use CSS. You can probably achieve most or all of what you've described without javascript.
So I have this weird problem with bootstrap and rows. It only seems to happen in the LG view which is greater than 1200px. For some reason random rows are not conforming to the full amount they should(in this case 1140px) and instead are smaller.
I am including a few pictures to show exactly the issue I am talking about to see if I can figure out what is going on. Any help would be appreciated.
If i make the width smaller to simulate a smaller screen everything works without issue.
https://s21.postimg.org/8i0w6wtpz/Screen_Shot_2016_09_18_at_7_22_08_PM.png
https://s22.postimg.org/xr3ekeyf5/Screen_Shot_2016_09_18_at_7_23_09_PM.png
https://s22.postimg.org/dkzwlj2rl/Screen_Shot_2016_09_18_at_7_23_28_PM.png
<section class="inner">
<div class="container portfolio-container">
<h2>PORTFOLIO</h2>
<div class="prcnr" ng-repeat="port in portfolio">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<a rel="{{port._id}}" class="fancybox" href="images/uploads/{{ port.main_image }}">
<img src="images/uploads/{{ port.main_image }}" alt="" class="main_portfolio_image img-responsive">
</a>
<div class="hidden">
<a rel="{{port._id}}" ng-repeat="image in port.images" class="fancybox" href="images/uploads/{{image}}">
<img src="images/uploads/{{image}}" alt="">
</a>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 port-txt">
<h4><b>{{ port.title }}</b></h4>
<p ng-bind-html="port.description"></p>
</div>
</div>
</div>
</div>
</section>
Custom CSS Pertaining to this code :
.portfolio-container h4 {
font-size: 22.5px;
}
.portfolio-container .port-txt p {
font-size: 15px;
}
#media (min-width: 1200px) {
.main_portfolio_image {
width: 570px;
height: 385px;
}
}
those picture are not slimier to your code.
there is 2 col-lg-6 column I found where one column contain a hidden filed. that's not a problem. And you are using bootstrap so you don't need to set media query for image . Just simply use img-responsive and set the image with a min-width of 100% like and add container-fluid in html part
img.img-responsive{
min-width:100% !important;
}
I am using JCarouselLite to produce three scroll boxes on a website. 2 of the carousels line up properly (New, Gifts), but a third does not (BestSellers).
The image floats to the left because the plugin keeps calculating the width incorrectly. All three have the same underlying HTML code, but I can't get the BestSeller Carousel to line up properly.
I also tried to run it on window.load. and have init running in the footer.
What am I missing?
Update:
Here's the Code that initalizes the Carousel:
jQuery(document).ready(function($){
$(".rotateNewContent").jCarouselLite({
btnNext: ".next", btnPrev: ".prev",
speed: 800, visible: 1
});
$(".rotateBestsellerContent").jCarouselLite({
btnNext: ".nextBest", btnPrev:
".prevBest", speed: 800, visible: 1
});
$(".rotateGiftContent").jCarouselLite({
btnNext: ".nextGift", btnPrev:
".prevGift", speed: 800, visible: 1
});
});
here is the html of the first and second lists.
<button class="prev"></button>
<div class="rotateWrapper"><div class="rotateNewContent">
<ul class="NewProductList">
<li class="Odd">
<div class="ProductImage">
<a href="#" ><img src="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>
Organic Maple Syrup from Mount Cabot
</strong>
</div>
<div class="ProductPriceRating">
<em>$13.00</em>
</div>
</li>
<li class="Even">
<div class="ProductImage">
<a href="#" ><img src="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>
<a href="#">Sicilian Marmalades from Marchesi di San
Giuliano</a>
</strong>
</div>
<div class="ProductPriceRating">
<em>$15.00</em>
</div>
</li>
</ul>
</div></div><button class="next"></button>
<button class="prevBest"></button>
<div class="rotateWrapper"><div class="rotateBestsellerContent">
<ul class="NewProductList">
<li>
<div class="ProductImage"><a href="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>Farro from Rustichella d'Abruzzo</strong>
<em>$8.75</em>
</div>
</li>
<li>
<div class="ProductImage">
<a href="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>Mariage Frères Marco Polo</strong>
<em>$22.00</em>
</div>
</li>
</ul>
NB: This site is not yet live, please do not shop.
The middle instance has a width of 135px, while the left and right instances have a width of 180px.
Left Content:
<div class="rotateNewContent" style="overflow: hidden; visibility: visible; position:
relative; z-index: 2; left: 0px; width: 180px;">
Middle Content:
<div class="rotateBestsellerContent" style="overflow: hidden; visibility: visible;
position: relative; z-index: 2; left: 0px; width: 135px;">
I used Firebug to diagnose the CSS issues.
i narrowed it down to the product names. i believe it has something to do with the foreign characters in the names. when i take those products out, the layout resolves correctly.
--now i have to figure out how to fix that. :-)
the problem was that there were two divs within the li element. i wrapped both within another div and gave it a set width and height. now the plugin uses that div to calculate its size.
thanks for helping me think this through george!