I have a JSon file that is meant to resemble that of a Youtube collection of info.
As such there are several img urls of varying sizes.
I'm currently listing the images in my html using an ng-repeat and directing to a specific image size.
What would be the recommended method to alter the path of this ng-repeat depending upon the screen size (media queries)
<div class="video-list">
<div class="scrollbar scroll-y">
<div data-ng-repeat="video in videos"class="list-items">
<ul>
<li>
<a href="#" data-ng-click="setVideo(video.snippet.resourceId.videoId, video.snippet.title, video.snippet.description)">
<img src="[[video.snippet.thumbnails.medium.url]]"/>
<h3><span>[[video.snippet.title| removeBrackets]]</span></h3>
</a>
</li>
</ul>
</div>
</div>
</div>
but i would like it to display [[video.snippet.thumbnails.default.url]] when the screen is at a specific size. I understand I'll probably need to make a filter or a function. I'm far too new to angular and javascript to understand the best practice.
Any guidance is greatly appreciated :)
Related
I know this is a very basic question but it has me very confused - there's not much documentation that I could find about the flexslider. Also, I'm very new to this language, I'm a C++ / ASM type person but trying to get a webpage setup. The page is for an internet radio station. The slider is used to show the album covers of the currently playing, next, and later albums. The image names are 'hard-coded' in the slider which is fine if the images don't need to change. The problem is that the images do change every 3 minutes but the browser caches them so even if the image file contents change, the old image data displays.
I spent the last few weeks developing a Windows service that updates the actual image files (Playing.jpg, Next.jpg, etc.) from the SQL database (among other things) only to find out once the slider is initialized, the displayed images don't change.
Anyway, is the slider just used for 'static' images? Any advice as to how to update the images dynamically? php / js?
<li> <img src="Playing.jpg" alt="" >
<div class="flex-caption">
<h2>Now Playing</h2>
</div>
</li>
Thank you!
Keeping the filenames the same but changing the image contents makes no difference. What's the general way of changing slider images dynamically? Code snippets would be appreciated.
To avoid the browser cache you can add a random query like that:
PHP:
<li> <img src="Playing.jpg?v=<?php echo rand(); ?>" alt="" >
<div class="flex-caption">
<h2>Now Playing</h2>
</div>
</li>
JS:
<li> <img src="Playing.jpg" alt="" id="imageid">
<div class="flex-caption">
<h2>Now Playing</h2>
</div>
</li>
<script>
document.getElementById("imageid").src="Playing.jpg?v="+Math.random();
</script>
Mehedi's answer is good but random strings can collide and Math.random() is returning a float, an integer would be better.
So, it is better to use server current UNIX time e.g.:
PHP
<li>
<img src="Playing.jpg?v=<?php echo time(); ?>" alt="" />
<div class="flex-caption">
<h2>Now Playing</h2>
</div>
</li>
JavaScript
document.getElementById("imageid").src = `Playing.jpg?v=${Date.now()}`;
document.getElementById("imageid").alt = `Image Name: Playing.jpg?v=${Date.now()}`;
<li>
<img src="Playing.jpg" alt="" id="imageid" />
<div class="flex-caption">
<h2>Now Playing</h2>
</div>
</li>
However, this is bad for the user as he is always downloading images. The best solution would be to change the filenames from database and pass that data somehow to your code (maybe an API endpoint or something).
Also, since images are changing every 3 minutes, you could set a cookie in localStorage and check with it for intervals of 3 minutes before passing another time in your <img>.
Personally, I would go with an API-approach.
I am trying to slice content of block with nested ng-repeat to show page by page. The content is overflow viewport.
Does anyone know how can I do it?
HTML
<li class="outer-ng-repeat" ng-repeat="epgDate in epgDates">
<h3></h3>
<div class="inner-container" >
<div class="nested-ng-repeat"
ng-repeat="epg in epgDate.epg">
<div class="telecast__name">
</div>
</div>
</div>
</li>
I want to slice content by pages based on some condition, I've tried slice(0, 10) but in my case it is not a solution. I need to attach to, maybe, viewport height or something, I don't know, help please.
I have a view that generates a HTML structure of individual client receipts. These receipt images can be of varying heights. If a PDF is uploaded, we convert it to an image for easier rendering, but want to display each page inside its parent container.
<div class="expense-report">
<table class="expenses"> /* Associated expenses table */</table>
<ul class="receipt-list">
<li class="receipt-block border-black multi">
<div class="receipt-number">Receipt1</div>
<img src="...path/to/image/page1" />
<img src="...path/to/image/page2" />
<img src="...path/to/image/page3" />
<div>/* More receipt data if available */</div>
</li>
<li class="receipt-block border-black single">
<div class="receipt-number">Receipt2</div>
<img src="...path/to/image" />
<div>/* More receipt data if available */</div>
</li>
<li class="receipt-block border-black single">
<div class="receipt-number">Receipt3</div>
<img src="...path/to/image" />
<div>/* More receipt data if available */</div>
</li>
</ul>
</div>
I have a requirement to add a "page-break-before" or "page-break-after" onto the "receipt-block" so the whole block will break together if an image is too large for the remaining whitespace on a page when printing/print previewing.
So, if "page1" in my example can't fit onto the first page it attempts to render on, it will break for the entire "receipt-block" and put it on a new page, which can then break wherever its heart desires. Likewise, if "Receipt2" and "Receipt3" are small receipts, they should take up the correct space on the page without breaking (i.e. no page-break-after).
Currently, the "receipt-block" wrapper begins directly after the previous block, but the image page breaks, so I end up with "Receipt1" on one page, with a border, and a bunch of whitespace until it shows the image on the next page, when I'd like it to break the whole block when it decides the image should break.
I've tried several combinations of changing the display style, adding page-break-inside: avoid to all of the elements, using widows/orphans, changing the overflow, converting the whole structure to a table layout, etc. When I do find a solution that seems to work, if you switch the print layout to landscape it reverts to the same issue.
Is there a way to dynamically check if an image is on a different page using JavaScript, or if it will end up page-breaking on it's own, so I can add a page break on the correct items?
Can't seem to figure out how to get this behavior, or if it's even possible? Cross-browser printing support seems to be overlooked and handled differently by browsers.
Any solutions to this issue would be greatly appreciated. Thanks!
I want to implement carousel on my web page.I have created a plunker page for the same.
In that link, i have used CSS3 transformations to create circle effects.
In the above link i have removed the code which i had for carousel implementation because it was not working.Actually what happens is that most of the jquery caosuel available like(elastslide,liquidcarosel,flexslider) etc work only if the img(which needs to be slided) is directly under "li" tag.But in my case, i can't keep img directly under "li" because of the css3 transformations i need.(See index.html page)
http://plnkr.co/edit/PxTtJ2expidIamWUqXLj?p=preview&s=carousel
for eg
<li>
<div class="ch-item">
<div class="ch-info ch-info1" >
</div>
<div class="ch-thumb ch-img-1">
<p class="text"> Java7</p>
</div>
</div>
</li>
Could anyone please suggest how can i implement it.
Basically.... Get this working... JSFiddle!
I am trying to use the jQuery plugin for filtering items inside 3 UL's. (Each <ul></ul> will have a unlimited amount of list items.)
The plugin I am using is located at the link below (Quicksand) (along with the documentation & demo).
Quicksand: http://razorjack.net/quicksand/
Documentation http://razorjack.net/quicksand/docs-and-demos.html
The plugin will basically filter the results of the items contained within my <ul></ul>.
I attempted this on a number of occasions, but I am getting no console errors or anything to point me where I am going wrong, and have no idea why its not working.
I have 3 <ul class="column"></ul> tags each with list items below them (3 in this case). I need to be able to filter (and animate) all of them, using the plugin.
I have also made a - JS Fiddle - with my code for you to play with. (Quicksand is included as a 'resource').
The basic structure of my HTML is:
Menu
<!-- On click of these, filter according to 'data-value' -->
<ul id="definations" class="wrapper">
<li>all</li>
<li data-value="web">digital - web</li>
<li data-value="iphone">digital - mobile</li>
<li data-value="android">branding & print</li>
<li>event</li>
<li>motion</li>
</ul>
Content to Filter
<div id="portfolio" class="wrapper">
<ul class="column">
<li class="work item" data-id="id-1" data-type="iphone" data-title="iPhone" data-project="iPhone and Android App" data-year="2012 Project">
<img src="/css/img/product/work-demo1.png" alt="Omega"/>
<a class="view" href="javascript:;"></a>
</li>
<li class="work item" data-id="id-2" data-type="android" data-title="Android" data-project="Rich Web Application" data-year="2012 Project">
<img src="/css/img/product/work-demo3.png" alt="Description"/>
<a class="view" href="javascript:;"></a>
</li>
<li class="work item" data-id="id-3" data-type="web" data-title="Web" data-project="Site Rebrand" data-year="2011 Project">
<img src="/css/img/product/work-demo2.png" alt="Description"/>
<a class="view" href="javascript:;"></a>
</li>
</ul>
<!-- I have 3 of the above columns, I would like the filter to act on all of them -->
<!-- I have only included 1 to keep it short -->
</div>
-
Ready: JSFiddle!!
- Update -
I decided to purchase and use the Isotope plugin in the end. The examples on the site are great, and I could achieve the effect I needed.
Very customizable and the perfect plugin for what I needed it for. (If your reading this, its probably what your after).
Check it out at: http://isotope.metafizzy.co/
STATUS: Here is an example of what you want using the live demo below: jsFiddle
I highly recommend this tutorial with live demo that shows an excellent method to use the Quicksand plugin. The comments show below include a couple of tips by me explaining how to have clickable links in the navigation.
The markup is very similar yours except in addition to the Quicksand JavaScript file a separate asset file is required that configures Quicksand, which your jsFiddle is not using.
To be sure, this asset file is the Click Event handler that activates the Quicksand filtering based on your markup layout. For example this jsFiddle shows 1 of 5 ready to use examples from the Quicksand website that are linked in the Examples Section. The separate asset file I was referring to can be considered as the jQuery markup in the JavaScript window.
Also note that jQuery UI Library is required, and is loaded as an asset in the above jsFiddle.
I created a Quicksand Demo with Shadowbox, a lightbox alternative, based on the original demo. It's on the Shadowbox Forum. If you need help with that, visit and post there and I'll be glad to help.
this error/bug is 'cause the plugin doesn't work with the latest verions of jQuery. You can solved it with using just old jQuery (1.7.2 i just tryed and it works).
please sorry my english...