I have made a web application which uses multiple pages. To go from one page to another, I was using window.location.href. As I didn't like this approach, I wanted to use Custom Element. I'm searching I way to change the current custom element displayed when we, for example, press next button. Does someone know a similar topic please?
index.html :
<body>
<div id="root"></div>
</body>
index.js :
window.customElements.define('connection-view', Connection);
//other custom element defined here like profile, ...
var root = document.querySelector('#root');
root.innerHTML = '<connection-view></connection-view>'
//when the button login is pressed, have to change this to profile component
Put a root div and then change his innerHTML with the custom element tag
Related
I'm very new at chrome extensions, and navigating it is a lot of self-teaching. I was hoping someone could help with this simple issue I have!
I want to have a very small popup, that displays a closed book upon clicking the extension icon. Once clicked, I want it to switch to an open book, indicating it is "active". I currently have a manifest.json file, default popup file with a css file for styling and js file as well, and I have a background page in js.
I am not sure how to switch the book image inside the popup.
(image linked on text)
the popup window is extremely tiny, which I want it to be. Just wanted to swap those pictures to indicate active mode, and also learn how to send the "active" signal to background script to perform the task I want
If you are able to just change something like the src attribute it may be the easiest method. If you need to have two different elements then you may want to show/hide them using the style attribute and put the onclick on a parent div of the two children.
<img src="/pathToOpenBook" onclick="toggleBookOpen" alt="imageDesc" />
function toggleBookOpen(pointerEvent){
const openBook = "/pathToOpenBook";
const closedBook = "/pathToClosedBook";
const element = pointerEvent.target;
const src = element.getAttribute('src');
const isOpen = src.toLowerCase().includes('open');
const updateValue = isOpen ? closedBook : openBook;
element.setAttribute('src', updateValue);
}
I am currently working on a website which uses MVC model.
I have a Layout page and 4 pages(home,contactus,aboutus,ourwork) which use this Layout. I am having this situation where I want to use the html element defined in layout page in one of the page(ex. home).
use in the sense modify certain property of that element(using javascript).
example:
lets say there is a button defined in layout page and i want to change the display property of the button when some action happens in home page
Yes, it is possible! You have to create a global Javascript file and add that into the layout body and select the element you want, e.g.:
If the element id is readm, put the script into that file:
var readm= $("#readm");
Include the script file src into the layout body, e.g.:
If the filename is accesselement.js:
<script src="accesselement.js">
Use the variable name in your view in which that element is required.
That's it.
I am using angularjs for part of my page say single component, which is used in many pages.Now my problem is hash url does not work now.
Example: I have a div#hello in my page and URL is given as Url#hello.but it does not go to that particular div just the top of the page is diaplayed.
So could you guys help me here please?
NOTE:The url#hello is changing to url/#hello.The page cannot be changed to angular and only that single component use angular.
EDIT: Thank you Stephen:) yes, of course, we need to use routing.The thing is, after page load, if we change the url back to URL#hello it works.So is it possible to do it in other way apart from Routing and $angularscroll ?(i.e) just from the JS or jQuery perspective ?
Ok, thanks. I've misunderstood you. I think I have a better understanding now. Please correct me if I am wrong:
So, you're essentially trying to make a hello link that points to a section within the same page. When you change the url to pageUrl#hello the page should jump down to the section with the id called hello.
But the problem is that since your section has an AngularJS component that uses the ngRoute module, this routing functionality is making your page redirect to pageUrl/#hello instead of jumping to the HTML section with the id='hello'.
Is this correct?
Solution
If I understand your problem correctly, the solution is to check if your ng-app='appName' attribute is on the body tag. If it is, then move it down to your component's parent element.
If a hash link is a child of the ng-app element, then when you click it AngularJS thinks you want to redirect to another view. This is what causes the Home link to redirect to pageUrl#/home.
<body ng-app="demoApp">
Hello <!-- redirects to #/hello -->
<div id="hello"></div>
<!-- ... -->
So if you put the hash link outside of the ng-app element then it will behave as expected when you click it.
<body>
Hello <!-- jumps to the 'hello' div -->
<div id="hello" ng-app="demoApp"></div>
<!-- ... -->
On Page Load
If you want the page to jump to the hello div on page load, then set window.location = '#hello' inside your controller. Then, when you visit pageUrl#hello, the hello div should appear instead of the top of the page.
If you don't have a controller, or don't want to use one, then after your document loads, check the hash url and change it programmatically.
$(document).ready(function(){
if(window.location.hash == '#hello'){
window.location = '#hello';
}
})
I'm working with on developing one of the social networking site and its having some notification features in left panel.
Whenever any user have played a game it will automatically change the number of notification count.
For that i have using below code line.
jQuery('#count_id').load('mypage.php');
But it will retrieve me whole site content with header,footer and content area in the response text, which is wrong as per my requirements.
but if i used below code of line
jQuery('#count_id').load('mypage.php #count_id');
then it will retrieve me a real count but add another div in between the original,
Original html:
<div id="count_id" class="notify">2</div>
and Code after retrieving response:
<div id="count_id" class="notify">
<div id="count_id" class="notify">1</div>
</div>
which is also not as expected. count are right but i don't want to add new div inside a original one.
What should i need to change in my code?
Thanks.
jQuery('#count_id').load('mypage.php #count_id > *');
That would bring only the DOM childs (the content)
Because this is how it works. Also it enables you to attach events to the element you load and delegate them inside this element (so new elements can also benefit from attached JavaScript events) - see .delegate().
If you want to replace the element, you can try the following:
jQuery.get('mypage.php', function(data){
jQuery('#count_id').replace(jQuery(data).find('#count_id'));
}, 'html');
I did not test it, but it should work.
Ivan Castellanos is however right. According to the documentation, you can provide any selector after the first space in the .load()'s parameter.
To retrieve count_id, you can directly get the html value in the div like this:
<script type='text/javascript'>
jQuery(document).ready(function()
{
countVal = $("#count_id").html(); //returns the html content inside the div, which is the count value
countVal = parseInt(countVal); //This will convert the string to type integer
});
</script>
Note:
If you want increase the count and update the div value, you can add the following lines:
countVal++;
$("#count_id").html(countVal);
I need to be able to open a link to a specific URL that is within an iFrame; the link is generated by php and I can't change the source code, so I need to change the link in the iFrame dynamically, if possible.
What I'm doing is this: on a non-profit organization's site, I have an affiliate store (generated by php) displayed within an iFrame on a page in order to make it more styled with the rest of the site. The php store pulls products from an affiliate service; the link to the store.php is in the same domain as the main non-profit's site.
The problem is the final "Buy Now" link from a product opens the final destination e-commerce store within the iFrame, and as such the page is stuck in the iFrame and looks bad and one must scroll V and H to see it and check out.
The link I need to open in a new window always has the class "av_buy_now" I have access to the CSS file, which I can change. I have access to the PHP files, i.e. shop.php, but it doesn't appear that the final link is generated locally. I'm showing the iframe this way:
<iframe src="http://nonprofit.org/shop/mj/shop.php"></iframe>
Is it possible to use jQuery or Javascript to find the links to mydomain.com with that one class and add a new window attribute to them? Or is there a better way? Thanks
Without some code I don't know the exact structure of your code, but I this could do the job. It requires jQuery to be in the iframe too.
$('iframe')[0].$('.av_buy_now').filter(function() {
return $(this).attr('href').indexOf('mydomain.com') > -1;
}).attr('target', '_blank');
You can change it if some how you can manage to execute this kind of code, changing class is little troublesome, of you got an id on it do something like this.
PAGE.html:
<button onclick="openinnewwin()">Get It</button>
<iframe src="test.html" id="ifrm"></iframe>
<script language="javascript">
function openinnewwin(){
ob=document.getElementById('ifrm');
if ( ob.contentDocument ) {
ob.contentDocument.getElementById('a').target="_blank";
}else if ( ob.contentWindow ){
ob.contentWindow.getElementById('a').target="_blank";
}
}
</script>
test.html:
Hello