On my homepage, index.html, I have a div for a rating system like this
<div class="srtgs" id="rt_??"></div>
Then in my javascript I have a function that generates modal content for each feature in an array, within this I need each modal to have the div above like this
<div class="srtgs" id="rt_<feature.properties.name>"></div>
I tried to change the id in javascript which works but then on page refresh when it loads the modal it is back to rt_?? so it does not get the correct ratings from the DB
Any help is appreciated cheers
Create a JS function with your code for a div id.
Then Use:
<body onload="javascriptFn()">
Change "javascriptFn()" to your function name.
Related
i have a website in opencart, the homepage is default where it shows a code like
<div id="content"> <?php echo $content_top; ?></div>
I added my own HTML code inside it like below:
<div class="created">
this is some content
</div>
now the content I created is coming in the footer, am not able to find the default code for the page, I want the content to be placed below the slider in the page, so I created a parent div main-div for both the slider and my content, but as I don't have the code to the homepage i am not able to place the slider and my content inside the main div, I only know the class of the slider slider-wrap, is there anyway to force the two classes inside the main-div using css or javascript. please help. thanks in advance
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 work on my Angularjs project. I use iframe in my project to display some page.
here is iframe
<iframe frameborder="0" ng-`src="../playground/#/sitesDamages" ></iframe>:`
Here is div that I want to display in template displayed in Iframe:
<div id="frameArea">
//some content
</div>
The problem that I want the page to be displayed from specific div where Id="frameArea".
As an alternative, you could just use a simple and use the jQuery "load" function to load the whole page and pluck out just the section you want:
$('#target-div').load('http://www.mywebsite.com/portfolio.php #portfolio-sports');
I am trying to change the content of the yellow area when the user clicks on 'Dashboard', 'customers' etc: Here is the template I used
First I tried to change index.js I gave an id to div area:
$('.icon-dashboard').on('click', function() {
$("#area").load("secondpage.html #area > *");
});
This didn't work for me. Any suggestions to change the content between main tags?
Your selector for the load command is wrong. Your HTML shows a <main> tag with <div class="helper"> so you would want to use $("main .helper").load(...) to load content into "helper". Or, if you want to replace the "helper" div with whatever comes back from .load, just do $("main").load(...).
Also, passing "secondpage.html" to .load() is only going to work in the local browser. I'm assuming you're only doing that because you're testing? Ultimately, you'll need some backend script at an URL to return your content.
I am writing a quick function in javascript that interacts with wp in a set of posts that are hidden and shown when I click an element that corresponds to its matched href="#element".
Function would run like so:
1) You click one of the dynamically added post titles where it has a href value of the post title in the tag for it.
2) The corresponding hidden project under it with an id that matches the href value of the dynamically added elements above to basically show it and hide the previous child project.
Now I am trying to do this with pure javascript alone but its beginning to get really messy and long winded. I wondered if there was a good tool in the jquery api to aid in this?
Thanks,
If I understand your question correctly, in jQuery you could:
<h1 class="buttonHeader" data-divider="#dividerId1">Test</h1>
<h1 class="buttonHeader" data-divider="#dividerId2">Test 2</h1>
<div class="myDivider" id="dividerId1"><p>Content</p></div> <!-- Not sure what href is used for? -->
<div class="myDivider" id="dividerId2"><p>Content 2</p></div>
$(document).ready(function() {
$('h1.buttonHeader').click(function() {
// Get data attribute from clicked header
var correspondingDiv = $(this).attr('data-divider');
// Hide any open 'myDivider' dividers
$('.myDivider').hide();
// Display the corresponding divider
$(correspondingDiv).show();
})
})
I don't really understand why you're using the href attribute.
Edit: JSFiddle.
Edit: I've removed the loop as it wasn't necessary.