My Problem
I have modified this pure css slider, and trying to use it in Angular
Here's how I initially created the dynamic slider anchor points for moving around
<a class="slide__prev" [attr.href]="first ? '#slides__' + (appropriate?.data.length) : '#slides__' + ((i+1) - 1)" title="Next"></a>
The above generates an HTML looking like this
<a _ngcontent-fmy-c57="" title="Next" class="slide__next" href="#slides__2"></a>
The problem with the above is, although it works on the / url, trying to use the slider on any other routes fails, i.e website.com/other/.
This fails because instead of the built URL to point to the current page's fragment, it goes to the homepage i.e /#slides__2 which thus reloads the page.
What I've tried
I tried using Angular's URL fragment approach. Thus I built a URL like this dynamically. Except although the URL and fragment all look right, the slider doesn't get triggered to move left or right
<a class="slide__prev" [routerLink]="'.'" [fragment]="first ? 'slides__' + (appropriate?.data.length) : 'slides__' + ((i+1) - 1)" title="Next"></a>
Question
I'm not understanding why the fragment done with [fragment] doesn't trigger at all. Any insights will be appreciated
Related
I need create modal window with option, that when u open modal window, url is changing for example if u click a href with #123 in url will be after slash #123, and If I want to send someone link to modal window, he will redirect to this modal window after url. Can someone explain me how can I make it?:)
Because at this moment is that when u click some link, url does not change.
I use to modal window bootstrap 3 here is everything what I use in my project :
demo with whole code
https://codepen.io/Turqus/pen/rYeXvV
<a data-toggle="modal" href="#{{$index}}">Launch demo {{$index}}modal</a>
BTW
I also using AngularJS if it will help somehow to create this option.
I use the following service:
https://github.com/garakh/ngSilent
It allows you to change the URL and/or add parameters in the URL without calling the related route and controller. So before opening the modal window, you could use this service to add what you want to the URL.
Note that I have no connection to the developer, I have just used it in the past and it worked well for a similar problem.
What are the possible ways in which I can preserve an iframe embedded in a view in between my route changes?
As the route changes from Route A-> Route B, Ember destroys the View for A. My View for A has an embedded iframe which I would love to preserve and not reload when Route A is revisited.
So far, I tried moving my iframe to a parent view that is not destroyed when exiting Route A but browsers reload iframes when you move them around in the DOM, so its a moot exercise.
Indeed nesting is the right choice for you problem of iframe.
Here is a detailled example with a counter to see when the iframe is reloaded.
|-home
|-about
|-elsewhere
This important part of the fiddle is :
<div class="border-row">
This is home
<iframe src="http://emberjs.com/" width="100%" height="150px" onload="App.HomeController.countLoadings()"></iframe>
count : {{App.HomeController.loadcount}}<br/>
isDestroying : {{isDestroying}}<br/>
isDestroyed : {{isDestroyed}}
</div>
{{outlet}}
You can see that the iframe only reloads when you actually move to another part of the hierarchy route. If you navigate between home and about, the iframe stays the same.
I'm having trouble implementing history.js
I have a single page website that uses a jquery slider (royal slider) to slide full page divs that act as pages. The slider is operated using custom links. What I would like to do is have each link manipulate the browser history in order to 1. change the page URL. and 2. push states to the browser that are refreshable and can be navigated to and from via the browser's forward and back buttons.
What I'm not sure about is whether any pushstate will save the sliders current slide?
It's not essential if not, as the change in URL is the main thing.
Each link is controlled via a javascript click function that looks like this...
var workclick = document.getElementById('worklink');
workclick.onclick = function () {
thefooter.style.opacity = "1";
thefooter.style.filter = 'alpha(opacity=100)';
thefootdivide.style.opacity = "1";
thefootdivide.style.filter = 'alpha(opacity=100)';
$(".royalSlider").royalSlider('goTo', 1);
}
Can somebody help me with what I need to add to my page to get history.js to work with what I have here?
Thanks so much for any help
I am not an expert on History.js, but my understanding is that once it's installed, each time a slider value is changed you could call replaceState() with url parameters that reflect their values something like :
History.replaceState( null, 'My Title', '?slider1=' + $('#slider1').value );
And then, when your page loads have it read these request parameter values and (if present) set the sliders accordingly.
Again I'm not sure this is exactly what you need but I'm pretty sure it's on the right track.
Hi everyone,
reading through this google group and the fiddles and blogpost linked from there, I managed to get page transitions working with ng-animate.
Here's my Fiddle
the fiddle is nicely commented, please let me know if anything's unclear
By setting a 'transitionClass' (either .LR or .RL) on the ng-view I was able to trigger different css-transitions for every view change.
Now, what I want to do, is manually applying a "back" transition in case of changing the view one step back, no matter whether that step back is caused by a link within the app or the browser's back button.
To do so, within app.run(), I'm listening for $locationChangeStart, saving the current url slug and then checking against it on the next $locationChangeStart to determine whether we're going back one page. If that's the case, the "back" transition is applied.
This works pretty well, except for...
The entering page (.page-enter, .page-enter-active) is transitioning as expected, while the leaving page (.page-leave, .page-leave-active) seems to be stuck on the previously used transition.
I'd expect, setting a transitionClass 'LR' on the ng-view, that both pages, entering and leaving, use the css transition for '.LR page-enter' and 'LR page-leave'.
What seems to happen instead: If the transitionClass was 'ANY' before, the ng-animate will use '.LR page-enter' for the entering page and '.ANY page-leave' for the leaving page.
Reproducing the 'bug':
App starts on Page 1. Go from 1 to 2. Now go from 2 to 3, this transition is broken. Go from 3 to 1, this transition works as expected. Both transitions are 'RL' (Right To Left), so they should look the same. The only difference being that page 2 enters 'LR' while page 3 enters 'RL'. So, actually, page 1 will use the '.enter-active' transition that was originally set for page 3 when changing from 2 to 3.
Is this the expected behavior?
I'm majorly confuzzled right now, but only working with angular for the last week or so and ng-animate being relatively new feature I might very well be missing something. So before reporting a bug or anything I'd welcome any input on this.
Thanks!
Ok, so based on the comments I'm pretty sure you want the incoming page to also determine exit animations to apply to the outgoing page. So you really need your $locationChange code.
It also looks like the problem you are seeing is that you are setting a class on the parent independently on the incoming page but there is nothing to keep the animations waiting for this class change to occur.
The simplest fix seems to be to make the ng-animate depend on your changing variable to determine the animation class names:
<ng-view ng-animate="transitionClass"></ng-view>
then the CSS selectors just collapse into single classes:
.LR-enter-active {
...
}
(where transitionClass is still being set on the $rootScope in the locationChangeStart:)
$rootScope.$on("$locationChangeStart", function (event, next, current) {
...
http://jsfiddle.net/9XPVX/4/
Is it possible to pass the url attribute a dynamical query string? E.g url( ./SOME_IMAGE_GENERATOR?image=1 ); where image varies?
I need this attribute to be set via JS:
$( "#elem" )[ 0 ].style.background = "url( ./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1 )";
The link in the url points to a file, that generates and returns an image.
The image is generated correctly, but not applied as backround.
Clarification
The image I want to put inside does not exist yet. It is generated and returned by the page circuits.php and depends on the arguments.
The background is well changed, if the image exists. I have noticed that unlike changin the src attribute of the img tag, while the argument creates a request by the browser, sends and recieves headers and info, the background does not.
I'd thought about sending a request to the circuit.php generator, make him save the image on the server and then, with setTimeout, change the background, but I cannot rely on a certain time for the generation.
That is the problem. Now, do you guys have any ideas how to overtake this?
Working Example
I've replicated your scenario with a Jsfiddle and a image generating script held on my own website.
As you can see it is indeed possible to change the background dynamically with a generated image:
http://jsfiddle.net/DigitalBiscuits/Eh8yY/6/
Debugging your code
So....what's wrong with yours?
Well firstly if you're using Firefox or Chrome, use the developer tools to check what's going on. Make sure no Javascript errors are showing up in the console.
Then I would suggest you check that your javascript is actually selecting the element, and that it is able to change the background (lets say to a static image). Isolate the code you that's giving you problems and test it out in a new empty page, kinda like the JSfiddle I've linked you to above.
On a side note, your javascript code looks a bit foreign to me.
Instead of:
$( "#elem" )[ 0 ].style.background = ...
try using:
document.getElementById('myImg').style.background = ...
Lastly, ensure that you're setting the correct headers in your php script that generates the images, and that no output is happening before the headers are set.
Are you using jQuery?
This should be very easy to do.
Store the generated image url in a variable, and then use jQuery to change the CSS background image value, like so:
var imageUrl = "./renders/circuit.php?circuit=" + dirY + dirX + "&dims=1|1";
$('#myDiv').css('background-image', 'url(' + imageUrl + ')');
Here's a a jsfiddle demonstrating the concept. Click the div to see the background-image dynamically changed via JS.
http://jsfiddle.net/DigitalBiscuits/F3PUy/2/
Yes its possible to set on-the-fly images as background images, using CSS.
This is no different to how you can use on-the-fly images for img elements.