I have 4 images, that when I click on them, they each show a specific section on the website and keep the other three sections hidden. This part works great.
When that new section appears, it also has 4 images and when I click on them they too will show their specific section and keep the new three hidden. Here is where the problem lies.
I've tried using console.logs and the inspector and it seems all my content gets hidden. I'm too much of a newb to be able to figure out a solution.
I have kept the entire code off the page because I don't know where exactly the issue stems, but I'm 100% confident it's in my javascript. The whole code to get it to function like my website is over a thousand lines.
Any suggestions/hints/advice on what I can do to solve this please?
I think I need another function (but unsure how to go about creating it) as the first lot of images use AboutBlurbTabsFunction() to hide everything else and the second lot of images, I use the same one.
Here is the website
Here is the jsfiddle
Here is the Javascript code:
jQuery(document).ready(function(){
simpleForEach(document.getElementsByClassName("blurbtabs"), function(tc) {
tc.style.display = "none";
});
jQuery(".blurbclick").click(function(){
jQuery(".blurbtabs").hide();
jQuery("#"+ jQuery(this).attr("data-about") ).show();
console.log(jQuery(this).attr("data-about"));
});
jQuery(".tabimg").click(function(){
console.log("img tab click function");
jQuery(".tabcontent").hide();
jQuery("#"+ jQuery(this).attr("data-about") ).show();
console.log("#" + jQuery(this).attr("data-about"));
});
function simpleForEach(array, callback) {
for (var i = 0; i < array.length; i++) {
callback(array[i], i);
}
};
function AboutBlurbTabsTarget() {
jQuery(document).ready(function(){
var target = document.createAttribute("data-about");
var tclient = document.createAttribute("data-about");
var tshoot = document.createAttribute("data-about");
var tproduct = document.createAttribute("data-about");
var photographer = document.getElementById("bphotographer");
target.value = "sphotographer";
photographer.setAttributeNode(target);
var client = document.getElementById("bclient");
tclient.value = "sclient";
client.setAttributeNode(tclient);
var shoot = document.getElementById("bshoot");
tshoot.value = "sshoot";
shoot.setAttributeNode(tshoot);
var product = document.getElementById("bproduct");
tproduct.value = "sproduct";
product.setAttributeNode(tproduct);
console.log("first function reached the end internally");
});
console.log("first function ran through");
};
function AboutBlurbTabsFunction() {
console.log("function called");
var tabimgs = document.getElementsByClassName("tabimg");
console.log("var tabimgs: " + tabimgs);
<!-- for each tabimg -->
simpleForEach(tabimgs, function(tabimg) {
console.log("simple for each called!");
var aboutSection = tabimg.getAttribute("data-about");
<!-- add the click event listener -->
tabimg.addEventListener("click", function(evt) {
<!-- onclick do: -->
<!-- hide all tabcontents -->
simpleForEach(document.getElementsByClassName("tabcontent"), function(tc) {
tc.style.display = "none";
console.log("hide all tabcontents");
});
<!-- remove the active class -->
simpleForEach(document.getElementsByClassName("tabimg"), function(ti) {
ti.className = ti.className.replace(" active", "");
console.log("remove active");
});
<!-- show the current tab, and add "active" class to the link that opened the tab -->
document.getElementById(aboutSection);
tabimg.className += " active";
console.log("what section is called" + aboutSection);
console.log("what tabimg is at work here: " + tabimg.className);
console.log("what tabimg is at work here: " + tabimg.getAttribute("data-about"));
});
});
//console.log("second function ran through");
};
AboutBlurbTabsFunction();
AboutBlurbTabsTarget();
});
The problem probably lies here.
<!-- show the current tab, and add "active" class to the link that opened the tab -->
document.getElementById(aboutSection);
tabimg.className += " active";
You tried to get the next element but didn't do anything about it. Changing it to something like this should work.
<!-- show the current tab, and add "active" class to the link that opened the tab -->
var nextSection = document.getElementById(aboutSection);
nextSection.style.display = 'block';
tabimg.className += " active";
Related
I hope you have a good day :)
I am working on a plugin currently. I would like to loop through all the articles: on click => open a popp-up, when the pop-up closes => show this content ... My code only works for the first article. Sorry if that seems trivial to you, if you have links or tutorials to advise me, I am interested :)
Thank you !
function socialLocker() {
let sl = document.querySelector(".ws-sl-container");
let slc = document.querySelector(".ws-sl-content");
document.querySelectorAll(".ws-sl-box-for-social-medias a").forEach(function(ele) {
ele.onclick = function(e) {
var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
var check_window_close = setInterval(function() {
if (web_window.closed) {
clearInterval(check_window_close);
sl.style.display = "none";
slc.style.display = "block";
}
}, 1000);
e.preventDefault();
};
});
};
It seems to be a problem with selecting the elements in the document.
You can use next selector: https://api.jquery.com/next/ instead of selecting all and looping with foreach. With next, you will get the closest element.
Suppose all the posts in your list have a button with the class trigger and when clicked it shows a popup with the class of popup.
<script>
jQuery(document).ready(function(){
jQuery(".popup").hide(); /* hide all popups */
jQuery(".trigger").click(function(){ /* when button is clicked */
jQuery(this).next(".popup").slideToggle(); /* toggle the closest popup */
});
});
</script>
This way the click / action (you want to have it when closed) on (this) element will affect nearest element.
Why when a user clicks a link in the list does it cause the browser to flicker? This seems to be very apparent when a user clicks the same 'link' twice. Is there a way for me to remove this from happening?
It also appears to happen if you click a link that scrolls upwards instead of down. To test this click the list item 'Test' and then click 'Why'
https://jsfiddle.net/JokerMartini/9vne9423/
Here is the main JS bits which are doing all the work...
JS
function scroll_to_element(element) {
$('html, body').animate({scrollTop: $(element).offset().top}, 500);
}
$(window).ready(function() {
$(".nav-title").click(function() {
var target = $(this);
// get data-filter text
var title = target.data('title').toLowerCase();
// collect section titles
sections = $( ".section-title" );
// loop through and scroll to valid section
for (i = 0; i < sections.length; i++) {
var section = $(sections[i]);
var section_title = section.data('title').toLowerCase();
if (section_title === title) {
scroll_to_element(section)
// console.log(target);
}
}
});
});
You should prevent the default behavior of the anchor tag before invoking your custom functionality:
$(".nav-title").click(function(e) {
e.preventDefault();
});
Updated Fiddle
put href="javascript:void(0);" instead of href="#" attribute in your "What is", "Why" and "Test1" links
jsfiddle
I am using this JavaScript popup menu in my ASP.NET Web Forms project: http://jsfiddle.net/o8x59caz/4/
This code is working fine until I call a JavaScript function that contains Ajax code. And this function and the one given in the fiddle has no relation or common tags (or tag classes) between them. But whenever I call this Ajax function, it disables the popup menu and nothing happens when I click on the button that displays this popup menu. But before the control reaches this Ajax function, this popup menu is working fine. I tried to check the browser console but it shows no error or warning. Following is the code of my Ajax function:
var curevaldiv, ecount = 0;
function SaveAll() {
var gifurl = '<data url of gif animation';
var evalDivs = $("div.evld");
if (evalDivs.length > 0) {
evalDivs.html("<img src='" + gifurl + "' alt='Please wait. ' style='height:35px'/> <span style='font-size: medium'>Evaluating...</span>");
var i; var infoids = '';
for (i = 0; i < evalDivs.length; i++) {
curevaldiv = evalDivs[i];
infoids = infoids + curevaldiv.dataset.infoid + ';';
}
SendToServer(3,
{ "InfoIDs": infoids },
null,
function (data) {
if (data.rstat != -1) {
var infoid, infoval;
var infovals = data.rhtml.split(';');
for (var j = 0; j < infovals.length; j++) {
infoid = infovals[j].split(':')[0];
infoval = infovals[j].split(':')[1];
$('#val' + infoid).html("<i class='fa fa-calculator'></i> <span class='counter'>" +
(infoval == "[ERROR]" ? "<font color='red'><small><i class='fa fa-exclamation-circle'></i> ERROR</small></font>" : infoval) +
"</span>");
}
ecount++;
}
else
curevaldiv.innerHTML = "<font color='red'><small><i class='fa fa-exclamation-circle'></i> ERROR</small></font>";
},
function () {
curevaldiv.innerHTML = "<font color='red'><small><i class='fa fa-exclamation-circle'></i> ERROR</small></font>";
});
}
}
SendToServer() is a Utility function created by me to avoid writing common Ajax parameters again and again.
Please help me! This problem is making my head heavy for past three days. :(
Thanks to #eck for suggesting Chrome's Break On feature. It helped me in detecting where the DOM was breaking. I traced the function call sequence and found a function that was making the HTML of the div containing the popup menu's HTML to null and then again resetting it back to the popup menu's HTML. But the plugin was called on previous popup menu's HTML. I removed that code and now it's working fine. :)
The javascript of the div "intro" is loading at last. It's taking too long to load as the web page loads the bg image first and then loads the java script. Is there a way i can display "loading please wait" message in that "intro" div until it completely loads. I just want that the intro should load first.
Javascript code:
var tl = new Array(
"=======================",
" Welcome user, ",
" ###########################################"
);
var speed = 50;
var index = 0;
text_pos = 0;
var str_length = tl[0].length;
var contents, row;
function type_text() {
contents = '';
row = Math.max(0, index - 20);
while (row < index)
contents += tl[row++] + '\r\n';
document.forms[0].elements[0].value = contents + tl[index].substring(0, text_pos) + "_";
if (text_pos++ == str_length) {
text_pos = 0;
index++;
if (index != tl.length) {
str_length = tl[index].length;
setTimeout("type_text()", 500);
}
}
else setTimeout("type_text()", speed);
}
This is the script and its basically typing letter by letter in a text area in the div "intro". The problem is that it loads at last when the whole page has loaded. It starts printing the text after like 15 seconds or so.
There are "domready" events you can listen to on the document but seems that's not cross-browser.
Eg: Mozilla
document.addEventListener("DOMContentLoaded", methodName, false)
A better option is to use jQuery's .ready() event. They handle all cross-browser implementations.
Eg:
$(document).ready(function(){
//execute code here
});
//Shorthand
$(function(){
//...
});
See this related question for more on domready.
Load a page with the empty intro div, run the script with "loading please wait" then trigger an ajax request to load the rest of the page and update the page on onComplete event from the ajax request
Using jQuery
$(document).ready(function() {
// update div here
});
http://api.jquery.com/ready/
Or you could do that with
window.onload= (function() {
// update div here
};
You can use jquery for this by wrapping the content in a div tag and then another div that holds a loading image, something to this effect:
$(document).ready(function () {
$('#loading').show();
$('#divShowMeLater').load(function () {
$('#loading').hide();
$('#divShowMeLater').show();
});
})
Assume divShowMeLater is the div that contains all the content being loaded. The markup would look similiar to this:
<div id="divShowMeLater" style="margin-left:auto;margin-right:auto;text-align:center;" >
<div id="loading">Page loading...
<img src="images/ajax-loader.gif" alt="loading page..." />
</div>
</div>
Ok I know this is going to sound weird but it is what the client wants. I am working within a popup and when a user clicks on a datagrid cell within a certain column it will popup a html table with data. I have the second popup to display but it does not get focus. This is currently the code I am using to create the second popup. Any help to get the focus on this second popup would be great.
function onCellClick() {
var cmGrid = igtbl_getGridById("countermeasureDetailsGrid");
var cmCellID = cmGrid.ActiveCell.split("_");
if (cmCellID[3] === "3") {
var countermeasureID = igtbl_getCellById("countermeasureDetailsGrid_rc_" + cmCellID[2] + "_0").getValue();
var recordType = igtbl_getCellById("countermeasureDetailsGrid_rc_" + cmCellID[2] + "_4").getValue();
_crfPopupWindow = new crfPopupWindow(countermeasureID, recordType);
_crfPopupWindow.open();
_crfPopupWindow.focus();
}
}
function crfPopupWindow(countermeasureID, recordType) {
var crfPopup = new WindowDef();
crfPopup.target = "CRF_Popup.aspx?countermeasureID=" + countermeasureID + "&" + "recordType=" + recordType;
crfPopup.windowName = "CRFPopup";
crfPopup.toolBar = "no";
crfPopup.resizable = "yes";
crfPopup.scrollbars = "yes";
crfPopup.location = "yes";
crfPopup.width = 350;
crfPopup.height = 400;
return crfPopup;
}
EDIT: Solution
<script type="text/javascript" language="javascript">
function init() {
window.focus();
}
</script>
Have you checked that the 2nd popup has higher z-index CSS property?
First popup can have z-index of, say, 1000, but the second should have then 1001.
window.focus on page load This works