I'm having a big problem here. I want to add an image to html code. No big deal if only I had access to the html code. Unfortunately it's locked and it looks like that:
<ul class="cc-nav-level-0 j-nav-level-0">
<li id="cc-nav-view-1691317785" class="jmd-nav__list-item-0 j-nav-has-children cc-nav-parent j-nav-parent jmd-nav__item--parent">
Sound Packs
<span data-navi-toggle="cc-nav-view-1691317785" class="jmd-nav__toggle-button"></span>
</li>
<li id="cc-nav-view-1691317885" class="jmd-nav__list-item-0">
Apps
</li>
<li id="cc-nav-view-1691318285" class="jmd-nav__list-item-0">
Comments
</li>
<li id="cc-nav-view-1701055985" class="jmd-nav__list-item-0">
News
</li>
</ul>
The image I would like to add should be to the right of the font. Is there a way to insert the code somehow?
Sure, you should be able to do what you want. Look at the jQuery commands: .append(), .html(), etc. For example:
Note that you can also inject new CSS the same way...
$(function(){
var newstuff = '\
<style>\
#new{color:red;}\
</style>\
<div id="new">Here is a newly-injected DIV</div>\
';
$('#mt').html(newstuff);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="mt">You can replace what is there with modified/enhanced code.</div>
You could try to link a script that inserts an element after the DOM loads. Something like this:
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('ul').insertAdjacentHTML('afterend', '<div></div>')
})
Then you could use inline styling to make it whatever height, width and background you'd like:
<div style="height:300px;width:300px;background:url(yourImg.jpg);></div>
I made a quick pen to show you what it looks like.
Related
Fairly often I get the request to update all instances of a color on a site to a different color
For example:
Across the entire website, for any element that it currently #51284F (text, buttons, etc,) please update the color to #4F9CEC
Of course, this would normally be done with CSS in the style sheet. However, this is a very large website with hundreds of pages, and we aren't sure exactly which elements are currently set to #51284F, and which pages might contain an element that is set to #51284F. Additionally, this request comes up often, so it would be helpful to have an efficient way to change all the colors at once as opposed to manually going through each page and writing CSS for every element that needs a color update.
So, using JavaScript, is there any way to search the entire website for any element that is currently set to #51284F and update its color to #4F9CEC?
The HTML would look something like this:
<div class="header-default" data-widget-name="header-default" data-widget-id="template-header1">
<ul class="tels">
<li class="tel phone1 collapsed-show" data-click-to-call="Sales">
<span class="type">Sales</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
<li class="tel phone2 " data-click-to-call="Service/Parts">
<span class="type">Service/Parts</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
<li class="tel phone3 " data-click-to-call="Body Shop">
<span class="type">Body Shop</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
<li class="tel phone4 " data-click-to-call="Local">
<span class="type">Local</span>
<span class="separator">:</span>
<span class="value">123-456-7890</span>
</li>
</ul>
</div>
The CSS would look like this:
.header-default .tels { color: #51284F; }
Unfortunately, these are template sites, so we don't edit the HTML on a site-by-site basis. The HTML itself pulls from the particular template that the site is on
Thank you so much!
Maybe something like this?.. I'm not sure there is no syntax mistake. But you could try
$('*').filter(function () {
var selectColor = 'rgb(0,0,0)';
return ($(this).css('color') == selectColor);
}).css('color', "some new color");
It would be helpful if you could provide the code of the elements you are looking to update. Specifically their html and css formats.
Just click the folder with the right mouse button in sublime text and click FIND IN FOLDER, a box will appear in the bottom with "FIND" and "REPLACE" values, set find to #51284F and replace to #4F9CEC. Save all.
try something like this
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
[style*="color: red;"] {
font-size: 50px;
}
</style>
</head>
<body>
<div class="second" style="color: red; background-color: black;">The first div element.</div>
<div class="my-test">The second div element.</div>
</body>
</html>
I want to execute a js code at the head of the page and have this code be watching for any elements that might be loaded from the html, as soon as they are available, instead of waiting for the page to complete loading. Is that possible?
My case:
I want to hide some elements from a page dynamically. So far, I ve been doing this at the $(window).ready(...) function, but the side effect is that the elements are shown for a second before this function kicks in. I would like to catch these elements as soon as they are loaded and ready to be shown and not have to wait til the whole page gets loaded.
Thanks!
You can hide elements "by default" with CSS class and then, when page is ready, remove class on elements you want to show.
Very simple example:
HTML:
<ul>
<li class="hidden to-be-shown">Element A</li>
<li class="hidden">Element B</li>
<li class="hidden to-be-shown">Element C</li>
<li class="hidden to-be-shown">Element D</li>
<li class="hidden">Element E</li>
</ul>
CSS:
.hidden {
display: none;
}
JS:
$(function () {
$('.to-be-shown').removeClass('hidden');
});
Here is the demo.
Hope this helps :)
to avoid the effect you are describing you could just reverse your logic and initially hide all elements with css you then show
Try looking into $(document).load() which fires when the page is loaded as opposed to $(document).ready() which fires when the page is rendered
Well simple method is to do it with CSS(display:none)
But i you want to use jquery you can try
$(window).load(function() {
//Code
});
Hope this helps
I am generating rows dynamically with PHP from DB, once it compiles the initial page code looks something like this:
Snippet
<div class="options" id="options">
<div class="left_wrap">
<ul>
<li class="col_id b-bottom"></li>
<li class="hazard_header"><h3>Hazard</h3></li>
<li class="hazard_input b-bottom"></li>
<li class="con_header b-bottom"><h3>Controls</h3></li>
<li class="cat_header"><h3>Consequence Category</h3></li>
<li class="cat_options"></li>
</ul>
</div>
<div class="right_wrap">
<h2>Inherent Risk (Assessed risk without controls)</h2>
<ul class="fields">
<li class="bg b-top b-right"><h3>Consequence Level</h3><br/><span class="con_level_val"></span></li>
<li class="b-top b-right"><h3>Probability</h3><br/>Possible</li>
<li class="bg b-top b-right"><h3>Exposure (frequency)</h3><br/></li>
After page load I grab contents of the wrap options.
jQuery Snippet:
content = $("div.options").html();
Which in turns stores the above code in the variable content. Now, my question is how can I edit contents of variable content. For example I need to add value to li with class Col_ID like 1,2,3,4 and same when I am deleting I need to modify the contents again.
How can I do something along the lines content.getElement?
If you really need to work with the HTML string, here's something you can do:
content = $("div.options").html();
var $content = $(content);
// now $content is a jQuery object with a bunch of (detached) elements
// you can use the common functions on it without problems, such as
$content.find("li.col_id").text("Some text");
// now you need to do something with $content, or everything you did will...
// ...be lost. You cold, for instance, update the other variable back:
content = $content.html();
// content now has the updated HTML
Now, if you don't need the HTML string at all, then you can work directly like:
content = $("div.options");
content.find("li.col_id").text("Some text");
// now the DOM was already updated as you are dealing with attached elements
I know this is a topic discussed here many times, but none of the solution of the site have helped me....
I'm having two nav items and both of them load two different PHP files by using jquery ajax. I'm using jquery mobile.
My problem is that whenever i click on the other nav item the other one doesn't clear itself, so basically i get div on top of div.
I've tried .html(""); but hasn't worked for me so far.
HTML:
<div id="tabs">
<ul>
<li><a class="classloader1">Upcoming</a></li>
<li><a class="classloader2">History</a></li>
</ul>
</div>
<div id="content"></div>
JS:
$(".classloader1").click(function(){
$("#content").load("get.php");
})
$(".classloader2").click(function(){
$("#content").load("history.php");
})
I would try a different tab structure like
<div id="tabs">
<ul>
<li><a class="classloader one">Upcoming</a></li>
<li><a class="classloader two">History</a></li>
</ul>
</div>
where both elements share the classloader class name. Then I would use jQuery .html() to load the content but returning the specific file depending on the clicked tab like :
$(".classloader").on("click", function (event) {
var file = $(event.target).hasClass("one") ? "get.php" : "history.php";
$("#content").html(function () {
return $(this).load(file);
});
});
If you have more than two tabs, you could use a switch statement to set the value of the file var.
See DEMO
UPDATE : see DEMO using jQuery mobile.
Here is the portion of HTML in question as well Javascript related to it:
HTML first:
<div id="menu">
<ul>
<li>click</li>
</ul>
</div>
Javascript goes:
$("#menu a").click(function(){
var link=encodeURI($(this).attr("href"));
$("#divtobeloadedwith").load(link);
return false;
});
content.html structure:
<div id="wrapper">
<div id="diviwant">stuff</div>
<div id="dividontwant">stuff</div>
</div>
Upon clicking on link it loads all the content instead only specific div.
Fundamentally the problem is that you want two different things:
When running without Javascript, you want to use the link content.html#diviwant, as that will load the page content.html and then jump to the element with the ID diviwant.
When running with Javascript, you want to pass content.html #diviwant to jQuery's load() method, as that tells jQuery to load only the fragment with the id diviwant from the target page.
I'd probably use content.html#diviwant as the link, as you've got, then interpret that in the jQuery like this:
$("#divtobeloadedwith").load(link.replace('#', ' #'));
...to add the necessary space for the load().
You need to remove the space between content.html and #diviwant in the href of your link.
<li>click</li>
You also need to make sure that "divtobeloaded" exists.
<div id="menu">
<ul>
<li>click</li>
</ul>
</div>
<div id="divtobeloaded"></div>