Css selectors not working for simple jquery script - javascript

I have a codeigniter that uses twitter bootstrap. At the end of it I have a simple fade in script using jquery:
<script src="http://localhost/b1/js/jquery.js"></script>
<script>
$(document).ready(function() {
$(".content").fadeIn(1000);
});
</script>
the HTML is here.
Now I copied the source from script code over from the page that it is working on to the one that is not working, and suspected 'content' is not declared on the non-working page.
to test this I ran $(".content").length; from the firebug console and the output is: 0 so apparently 'content' does not exist.
I want to pick another css selector to let the fade in script work, so I tried:
$(".html").fadeIn(1000); and $(".container").fadeIn(1000);
It's still not working. Can someone explain what I'm doing wrong and how to pick a selector which will fade in the entire page?
I have portions of the page generated dynamically by php ( codeigniter ) . Specifically, the header, navbar and footer

how about $("body").fadeIn(1000) for the whole page? Note no dot since it's the element name, not a class name.

You don't have a div 'content' in your html so it is never going to find it....
Try doing it on body or html e.g $(html).fadeIn(800) - nb without the full stop at the start

Related

I want to change the href link of logo in wordpress website

I have use roccochoco theme in wordpress and now i want to change the url of logo that other than the home page.
i tried this code but that doesn't work
$(document).ready(function(){ $("a.custom-logo-link").attr("href", "https://"); });
please help me out and thanks in advance
In Wordpress using jQuery with $ often doesn't work, because it is used internally. The console might show you a warning saying "$ is not a function". You can put it inside of a function to make it work. Your element is selected by class, so the name of the class is enough.
( function( $ ) {
$(".custom-logo-link").attr("href", "https://www.newurl.com");
}( jQuery ) );
Another way to achieve it without using Javascript would be to edit the header.php file of your theme. If you want to keep your theme updatable, you should create a child theme (it is done in one minute with creating an empty folder and putting a style.css with some info in), copy the header.php of your parent theme in the folder and delete the part in the <a> tag, looking like get_home_url() .
After the DOM is loaded, we can set the href of the anchor having custom-logo-link class to point to the URL you prefer:
jQuery(document).ready(function(){
jQuery("a.custom-logo-link").attr("href", "https://www.domainname.com");
});

Everything is ok but can't access element by ID in aplication connected with c++?

I am curretnly working with some html, css and JS stuff and I am run into a problem. I have absolutly no idea why but I can' t access element in javascript using getElementById or jquery tag.. anything...
Here is html code of my element:
<div id="activeTickets" class="cardmenu_ActiveTickets">
<div id="txt_ActiveTickets" class="Title FontLightGreen">Active tickets:</div>
</div>
here is JS code :
alert($("#txt_ActiveTickets"));
alert(document.getElementById("txt_ActiveTickets"));
if(document.getElementById("txt_ActiveTickets")!= undefined){
document.getElementById('txt_ActiveTickets').innerHTML = Model.GetTranslateText();
}
this is happeing in JS function with name onTranslate() which is called here :
$( document ).ready(function() {
InitVariables();
ShowForm();
onTranslate();
});
In the function there are ten other divs set with the same code, only with different id, and all other divs works except for this one.. I absolutly have no idea what' s wrong.
I am sorry I can't really tell how exactly the html works with c++. It's project in my work. My colleague is making a c++ part of program and I am making the html,css,javascript stuff. As far as I know it's only connected by html5viewer object and each html page has it's model which is set for the every page and in the JS script then to access c++ function you just use Model.function(). That's should be the only connection to html. It only create html5viewer which displays the pages in html.
Isn't div id must be div id="activeTickets" ? Because by using div id="txt_ActiveTickets", you got the div id for question, not the answer. Also you can use another div id for answer. Try this.

jQuery function .prepend() don't work with wordpress nav menu item

I have a menu in Wordpress and I want to hook up Appointlet script to it. The code is here:
(function(e,t,n,r)
{
if(e)return;
t._appt=true;
var i=n.createElement(r),s=n.getElementsByTagName(r)[0];
i.async=true;i.src='//dje0x8zlxc38k.cloudfront.net/loaders/s-min.js';
s.parentNode.insertBefore(i,s)
})
(window._appt,window,document,"script")
<div data-appointlet="tfracine">
</div>
My idea is to create menu item with blank name, get its id (for example, "#menu-item-66"). Then add my code in front of it using jQuery function.prepend().
So I created custom js file, included it in the header.php file and the code inside the file was this:
$(document).ready(function(){
$( "#menu-item-66" ).prepend( "Test" );
});
I started with the word "Test" to figure out if it works.
Unfortunately, nothing happened and I have lack of skills to figure out why. Any suggestions or smarter way to do it?
The jQuery .prepend() function will prepend a jQuery element, not a string.
So, you have to create a jQuery element by doing:
var newElement = $('<p>New Element</p>');
In your case, what you could do is:
$(document).ready(function(){
$('#menu-item-66').prepend($('<p>This is a jQuery element</p>');
});
For a complete reference, check the .prepend() documentation out.
.prepend() and .prependTo() adds the specified content as the first child.
The question is bit not clear. Do you want to insert your script inside your
div ?

jQuery/css not working with BigCommerce

So I've got this nice little div button navigation menu setup here FIDDLE and when I try to implement it on BigCommerce it doesn't work. I am running into a problem when I try to add a snippet "%%Panel.ProductDescription%%" into the text.
So this is the code that I amended with the snippet
$("#description").on("click", function() {
$("#content").text( % % Panel.ProductDescription % % );
});
I've tried .text, I've tried using .html, I've tried making it a variable and calling it. I'm out of ideas. Anyone come across this before? Before adding the snippet the code works beautifully. After adding it the code stops working.
The problem is that when you are trying to insert the text %%Panel.ProductDescription%% you are targeting a Bigcommerce template shortcode. Once the template is rendered that shortcode is no longer accessible by any means - including jQuery.
When rendered that panel has the div id "ProductDescription". So your code should look more like this.
$("#description").on("click", function() {
$("#content").text("#ProductDescription");
});
Note, however, that this div has other html in it. Either your jQuery should use .html instead of .text or you should think about targeting a div inside of the description panel.
.ProductDescriptionContainer is what actually holds the description content.

When js files of draggable box include in php,It misses the draggable property

When I put draggable box js file under php code. It missed the property of draggable.
The code is like that:
<?php
Class Demo {
Function test()
{
$response="";
$abcContent=$this->getContent($x,$y,$z,$k)
if($abcContent!="")
{
$response.="<div id=\"columns\"><table class=\"myTable\" >";
$response.="<tr><td align=\"center\" width=\"30%\">";
$response.="<ul id=\"column1\" class=\"column\"><li class=\"widget color-blue\"><div class=\"widget-head\"><h3>abc</h3></div><div class=\"widget-content\"><p>";
$response.=$abcContent;
$response.="</p></div></li></ul></td></tr></table></div>";
}
}
}
?>
Note: I include js files and css files of draggable boxes in design page and content came from above class which is define in another .php page.
You need to tell jQuery where you want you dragable div. For example:
$( "#columns" ).draggable();
Have a look at the manual.
PHP doesn't play any significant role here. PHP runs on the server, JS in the user's browser.
Everything depends on how your insert this piece of HTML code into the page and the code of the page generated with PHP should be shown instead of this one.
ps: if you insert this HTML code into the page with the help of AJAX or any other way after the main page with js files of draggable core is already loaded and initialized then, of course, you have run initialization of the draggable component again in order to take into account the updated DOM structure of the page.

Categories

Resources