So, I'm using polymer starter kit, but something doesn't feels right.
I created a new 'page', but the url doesn't change when i access through the menu. Then, inside this page, there is a <paper-button> with a link <a> to another html file on the same folder, but it doesn't work, when you click it says "Cant find: https:www.mywholelink.com/. Redirecting to your home page"
On the index.html, i've added the item in the menu
<a data-route="mobile" href="{{baseUrl}}mobile">
<iron-icon icon="settings-cell"></iron-icon>
<span>Register your smartphone</span>
</a>
Then, on the same file, i have the 'page'
<section data-route="mobile" tabindex="-1">
<paper-material elevation="1">
<a href="{{baseUrl}}device.html" tabindex="-1">
<paper-button raised><iron-icon icon="favorite"></iron-icon>Add your phone</paper-button>
</a>
<p>Wanna contribute?</p>
<p>By adding your phone you are becoming a sensor to this experiment</p>
<p>Also, you can see the phone sensor data in real time through your browser</p>
<p><b>All data is collected anonymously</b></p>
</paper-material>
</section>
I made sure to add code to the elements/routing.html
page('/mobile', function() {
app.route = 'mobile';
setFocus(app.route);
});
I'm hours on this and I don't know what i'm missing, please help
Related
I've tried to use jQuery's load() function to change/load content without reloading. That works, but the problem is: the URL keeps the same!
Even if i use history.pushState() to change URL, that does not solve the problem. Example:
with the famous window.history.pushState("object or string", "Title", "/new-url");
With that, I am creating a "fake URL" for each page - If I try to enter the website with this changed URL again, i get an error, basically the link does not exist;
If I refresh the page, i lost all Ajax loaded content - I need to keep the content when refresh;
When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;
I want to get this result: https://reactjs.org/ - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - how do i do it?
3) printscreen of my page and its url
Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.
HTML:
<div class="navbar">
<div class="content">
<div class="logo">My logo</div>
<ul class="pages">
<li id="index">Index</li>
<li id="about">About us</li>
<li id="contact">Contact</li>
</ul>
</div>
</div>
<section id="page">
<div class="content">
<!-- PAGES LOAD HERE -->
</div>
</section>
<div class="footer">
<div class="content">
--Footer-- All rights reserved.
</div>
</div>
JS:
$(document).ready(function () {
$('li').on("click", function () {
$pageName = $(this).attr('id');
$('#page .content').load(`pages/${$pageName}.html`);
$('li').removeClass('active'); //only to remove the selection of actual page in CSS
$(this).addClass('active'); //only to add the selection of actual page in CSS
window.history.pushState("object or string", "Title", `pages/${$pageName}.html`);
})
})
you're describing "routing" which is the idea of URLs matching the content that is being display.
In jquery i'd recommend googling: jquery router or javascript router
IF you're writing other languages you can google [language] router.
most recently google is bringing up https://www.npmjs.com/package/jqueryrouter which is now forwarding to https://github.com/scssyworks/silkrouter
Once you choose a router, read the docs and come back with more questions.
I have Link to dynamic page as such:
<Link href={`/event/${event.slug}`}>
<a className="event-card">
<img
className="img-fluid"
alt={event.name}
src={event.event_main_image ? event.event_main_image : defaultEventImg}
></img>
</a>
</Link>
Problem arises when I go to this page through Link and click back and go to another similar dynamic page, there is no refresh of content.
Specificly there is a javascript webshop file that get's added to this page and when there is no refresh there is all sorts of buggy behaviour happening.
When I take Link element out and just use a tag like so:
<a href={`/event/${event.slug}` className="event-card">
<img
className="img-fluid"
alt={event.name}
src={event.event_main_image ? event.event_main_image : defaultEventImg}
></img>
</a>
then everything works, shop works, no buggy behaviour. Problem then is I cant run build with a tags as Nextjs compiler gives you error and tells you to replace a tags with Link.
So my question is how can I get a tag behaviour using Link component?
I have an HTML page in which there are list of images around 4-5. The HTML code of individual image (item-detail.component.html) is shown below:
<span class="badge" id="heart-badge{{item.$id}}">
<div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
<img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
</div>
<div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
<img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
</div>
</span>
<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
<img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
<div class="card-body">
<div class="auction-item-title">
<h1 id="auction-item-title">{{item.name}}</h1>
</div>
<div class="auction-item-bid-title">
<div class="auction-item-title-left">
<p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
<p id="auction-item-bid-title">Value: ${{item.value}}</p>
</div>
<div class="auction-item-title-right">
<p id="auction-item-bid-title2">About this item</p>
</div>
</div>
</div>
</a>
<bid-button [item]="item"></bid-button>
Now if I click above item (as you can see there is a href tag on it) then it shows me detailed description of that image on a new page and that page also has a back button at the top. Below is the code for back button on that new page:
<div class="item-top-bar">
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
</div>
<div class="item-pagination-bar">
<a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
<a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
</div>
</div>
Problem Statement:
Now if I click back button then it takes me to the home page but instead what I want is it should take me to the section of image where I was before.
Is this possible to do? I mean if I have may sections of images and if I click lets say 4th image then it will open detailed description of that fourth image page and now if I press back button then it should take me to fourth section of image where I was before.
If you want to go back, you should use the back() function in javascript
function goBack() {
window.history.back();
}
<button onclick="goBack()">Go Back</button>
Here is a small example of how to use it, now you can just adapt it to your page
You can do that by adding the id here
<p id="item-back-bar-link">
<a id="item-back-bar-link" href="/attendee-home/{{id}}">
// ....
</a>
</p>
Now there are multiple way to get the id. You can use the window.location properties or if in same component pass this id to a property binding
Here is how I would do it.
On a separate note, having the same ID across multiple levels may not be a good idea.
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="back" href="#">Back</a></p>
</div>
<script>
window.document.getElementById('back').addEventListener('click', function(e){
window.history.back();
e.preventDefault();
});
</script>
Angular has Location which is a service that applications can use to interact with a browser's URL. It is what you need in order to solve your problem.
See implementation below.
<div class="item-back-bar">
<!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
<p id="item-back-bar-link"><a id="back" (click)="goBackClicked()">Back</a></p>
</div>
Your ts file should have these lines.
import {Component} from '#angular/core';
import {Location} from '#angular/common';
#Component({
// component's declarations here
})
class SomeComponent {
constructor(private _location: Location) {
}
goBackClicked() {
this._location.back();
}
}
y not just get the position of the image when it is clicked with .position() and when returned from the image to the page you can get back to the same position with $(window).scrollTop(value).
If your page is scrolled and you want to maintain your scroll position while coming back from the detailed description page, then you can store the current page's vertical scroll position in a service and while navigating back, you can set the scroll position back from service.
Link to ScrollTop in MDN. Also Check Window.To for scrolling.
Sample Angular project to show Element.ScrollTop: https://stackblitz.com/edit/angular-qdjmny.
Click page1, scroll the sample list to navigate, when u com back, the scoll will be maintained.
Also make sure, in your [routerLink] of your detailed description page you are linking to the item-detail.component.html component.
Really theses comments are right. If you want go back page you can use the command window.history.go(-1) or window.history.back()
You can use an anchor tag for this. You need to give the part of the page you go back to an "id", like "gobackto_id". Then you can use this in your "" element in the "href" like this:
<a href="http://www.mypage.be/home#gobackto_id".
Task Overview
I'm using the Code Igniter Framework to build a small client management system.
Part of the functionality would be to delete records from the database, before deleting I need to check with the user their okay to delete that record as a precaution. I'd like to do this via a modal window.
Frameworks I'm using
CodeIgniter MVC Framework (PHP, MYSQL)
Foundation HTML/CSS Boilerplate
Foundation's Javascript Libraries (In particular reveal.js)
What I would like to achieve
I'd like to have the user click on the delete link:
Delete
As you can see, the href tag is currently saying, go to the delete_domain function in the main class, and it's passing in the clients ID into the URL, this is used of course on the otherside of the application to delete the record that matches that ID.
Further on in the tag we have:
data-reveal-id="deleteModal"
This refers to the same [id=deletemodal] found in the modal window div that has to reside at the bottom of the page just before the closing body tag.
This is the DIV for the Modal window that resides at the bottom of the page?
<div id="deleteModal" class="reveal-modal small">
<h2>Are you sure you want to DELETE?</h2>
<p class="lead">Random Text</p>
<a href="" ></a>
<a class="close-reveal-modal">×</a>
</div>
The Issue
I'm not really sure if or how it will work, because at the moment the delete link is inside a table row, each one of these rows is generated by a foreach function, so they're multiple of these inside the DOM each with a different /$clientID value.
If I could I'd like to pass that value to a modal window, then of course to the option to finally delete the row.
Can anyone help?
You can grab the data you want from the pressed button and throw it in the modal. There are probably a few ways to do it; here's one of them: http://jsfiddle.net/b37s3/
Delete
<div id="deleteModal" class="reveal-modal">
<h2>Are you sure you want to DELETE?</h2>
<p class="lead">Random Text</p>
<a class="deleteUrl" href="#"></a>
<a class="close-reveal-modal">×</a>
</div>
and js:
$(document).foundation();
$('a.deleteLink').click(function(){
var link = $('.deleteUrl');
$(link).attr('href', this.href);
$(link).html(this.href);
});
This will throw the href from the Delete button pressed into the modals' a href and as the links text.
I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.
According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.