I am currently working on this responsive gallery content and it is working the way I wanted it to. However, I needed to have one of the contents have a content change upon clicking a certain selection This is the working code of the content change. I added it on the main responsive gallery content after checking that it works ok on a separate file.
Is it due to my placing of the content changing script? I tried placing it inside the main script below but it didn't work. I tried creating its own script tag and placed it at the end but same result. Right now, I tried adding it inside the head tag and it still won't work. Can somebody please help me T^T
Kindly click the atkinsons menu since that is where I inserted the content change
Here is the script tag i'm referring to who is responsible for selecting the appropriate pages to change the content.
<!--Content Change Script-->
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
</script>
PROBLEM Under the Atkinsons page, the content is not changing whenever i click the selection. under the first link, the outcome should look like this The title and Page should change whenever I click on the selection.
THE CHANGES I already applied the code advise from the 1st answer below. it is now changing the title upon clicking the selection, but not all section is clickable. I applied the same changes in both codepen and localhost but it produces different clickable links that doesn't work. The random letter not working depends on the size of the window. Also the paragraph is not showing
Your script is not working because your <a> is not in page when you are trying to bind events to them.
You need to do delegate which is something like this.
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", "a", function() {
var id = $(this).attr("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
</script>
This will bind event to document, which is in page from start.
More on jQuery api here.
Related
I must work on Oracle MaxyMiser for make some changes into one site.
I've already tryied to modify the Html and it's more or less clear for me how make change from this section. Now I see there is another section inside the Maxymiser panel for make some changes. This section is the script section. I don't understand how this section works. I tryied to change one css property of one html div without succes.
This is how I try to change one proprety:
var salesAmount;
salesAmount = jQuery('#regionForm')[0];
console.log(salesAmount);
console.log(salesAmount.style.display); --> ""
console.log(salesAmount.css); --> undefined
//salesAmount.style.display = "block"; --> doen't work
});
Here I tryied to change the css display property without success ( the div already have one property display:none setted from the original css rule ).
I would like to open one modal already present into the html from one script and chage some css class or properties.
Can someone help me?
Thanks.
After several tests I was able to add a custom script from the appropriate section.
In order to connect a click action to a custom button added via a variant of MaxyMiser I had to work through the window.onload function.
An example of js I added:
//insert script code here
window.onload = function(){
const btn_close = document.querySelector(".class-button");
const banner = document.querySelector("#idDiv");
btn_close.addEventListener('click', function(){
banner.classList.add('hidden');
},false);
};
I hope this can help someone.
Bye
Till now we are using Iframe to load HTML and script to show the form to the user.
Now, we want to move from Iframe to DIV, but here we have a problem with script.
Because Iframe is responsible to apply the loaded script to the only iframe, but coming to div script will be loaded into entire HTMLDocument.
Is There any way that loaded script can be applied to that specific DIV only?
Thanks.
First, change your <iframe></frame> to <div></div> after this, you have this way to do this for your CSS(to a certain div):
#projectName{
style:value;
}
#divAnnounce{
}
The # targets things with ID's if you use a . before it will target the class names,
You can also use both if you need to get specific such as
#idname.classname{
}
If you have another div inside of the divAnnounce you can do
#divAnnounce #yournewdiv{
}
OR
#divAnnounce div{
}
OR
#newdivid{
}
Notice the space inbetween the two targets saying that they are a parent and child.
For your javascript I don't know with you are using plain javascript or jQuery
if it is jQuery then you can use jQuery noconflict. Create separate aliases to use jQuery for example to div1 & div2
Simple Example:
<script>
var div1Alias = $.noConflict();
var div2Alias = div1Alias.noConflict();
jQuery(document).ready(function(){
alert(div1Alias( "#div1" ).html());
alert(div2Alias( "#div2" ).html());
});
</script>
Try to do this changes in your code and let me know if it helps :)
I'm not sure how to entitle my question correctly, but here is the problem:
I have a number of div elements on a page and trigger links pointing to each of those elements with anchor ids. Those elements will work as popups.
Show Popup #1
Show Popup #2
Show Popup #3
<div id="pop1" class="popup">...content here...</div>
<div id="pop2" class="popup">...content here...</div>
<div id="pop3" class="popup">...content here...</div>
Now what is the effecient way to associate multiple links to divs for toggling them on link click?
Coding them one by one is not a good option because there can be too many elemens on a page.
$("#t1").click(function(){
$("#pop1").toggle();
});
Since your triggers have a common class trigger, you can do:
$(".trigger").click(function(){
$(this.href).toggle(); // href is "#pop1", "#pop2", etc.
return false; // prevent default action of anchor tag click
});
You can add data-attribute (for example, data-div-id) to your link tags that will contain associated div's id:
Show Popup #1
And then you just trigger it like this:
$('a.trigger').click(function(){
$('div#' + $(this).data('divId')).toggle();
}
I have a website that has a search box and some options. On the mobile page, this search box and options are visible first, which is really good on the start page. But when user searches something, the result is shown in a page having again the search box and options on top.
I would like to write a piece of code, that automatically jumps to content start. Simply, I have created an anchor using: <a name="contentstart"> just before the content. When the user opens this page, it should automatically jump to contentstart without having to press any link/button. How can I achieve that.
simply give an id to your a tag,
and use following javascript function :
function jump(id){
var top = document.getElementById(id).offsetTop; //Getting Y of target element
window.scrollTo(0, top); //Go there.
}
and in onload of body tag, call the function by passing the id of the anchor tag
You can simple use id and hash in url.
// some html
<div id="contentstart"></div>
// content
After that if you sufix your url with #contentstart you jump right to constentstart div.
http://webpage.com/something#contentstart
I am working in a software which has its interface written in JavaScript
I am trying to add an HTML button to the interface by defining a button in the HTML main code, check how I did this http://dpaste.com/691324/
The problem is,, the button appears before the page loads, maybe because the HTML loads before the JS files, I don't know exactly !!! But it really looks ugly, when the button show before the page, and I want to find some trick that can delay the button or to be loaded at the same time with the javascripts..how is this possible?
I am not a javascript person, but if you are using JQuery, it should go something like this
$(document).ready(function() {
document.getElementById('divId').innerHtml = '<input type="button" value="button">';
});
'divId' would be id of Div tag (place holder) covering input tag.
Or you can also call some plain javascript function which sets innerHtml of 'divId' on 'Body' tag's onload event,
Well I think is that you should use an anchor instead, and if you want, style it as a button. Here is the way to create the button with pure JS:
var anchor = document.createElement('a');
anchor.setAttribute('href', '/opentripplanner-tripArabic/index.html');
anchor.setAttribute('class', 'please use CSS'); //inline styling is dirty
anchor.innerHTML = 'use the Arabic interface';
document.getElementById('header').appendChild(anchor);
I recommend to use anchors because you are not using a form, and you only pretend to redirect the user to another page. Either way if you want still the button, you can use document.createElement('button'); and asign the property onclick: button.onclick = function(){... instead of the href setting.
Another thing you can do is to hide the button with CSS: display:none and on load wet the element and remove the style: button.style.setProperty('display', ''); or either way use the CSS propperty visibility: hidden.