How can I stop JQuery import from breaking existing code - javascript

I'm a beginner developer in Html/Javascript/CSS/Jquery coding
and while working a project, I had to integrate Jquery with previous code.
As soon as I imported Jquery, even simple buttons became styled badly. Jquery worked fine as long as I used its classes to assign styles to objects.
However since the rest of the project is not to change style, I need to know what I'm doing wrong. I've checked the objects for classes, and they have no classes, so it's not a css issue.
I narrowed down the error to the following screenshot, but I still can't figure it out. It seems to be something simple that I missed but I have no idea what it is.
Ignore the class="ui-content" and class="ui-button-text". I was just testing if something would change (nothing changed).

Try to inspect the elements that are styled wrong with your developer tools in the browser. The only styling in your example is in jquery.mobile-1.4.5.min.css, so that's where I'd be looking. Did you mistakenly delete a link tag to your stylesheet?

Related

How do you get the navbar toggle to work before 768px?

I have been trying to figure this out all day. I am using a theme that a client wanted to use. I have replaced every mentioning of 767px and 768px with 1359px and 1360px (those are when I want the menu to collapse). I have added custom CSS. I can get the button to show up at 1359px, but it will not toggle the navigation.
Basically, the navbar toggle button does not work until I hit 767px. I do not want to know specific code I can use to fix this problem. All I want to know is where this is being set as 767px. How does the website know to change it at 767px when I have changed every mentioning of this number to 1359px. I have gone through every php file, js file, and css file on the server. I am foaming at the mouth. I think I am going to explode. I have checked EVERY solution here and elsewhere on the internet.
Is this something I need to change in javascript, in css, or in php, or in all of them?
I am using WordPress. I am looking for a general solution NOT CODE. As in, where is this being defined. What file do I need to edit in this godforsaken theme to get the menu to toggle at 1359.
Please help before my brains start oozing out of my ears.
Okay well I feel like an idiot..
To anyone else having a similar issue,
CLEAR YOUR BROWSER CACHE.
Upon inspecting in developer tools I realized the site was loading an older version of my bootstrap.min.css file rather than the file I updated with the new breakpoints.
Cleared the cache and everything worked as expected.

Replace or even better remove inline styles with Javascript or jQuery?

Before I posted this question I searched Google (and Stackoverflow) and though there are quite some results for this, I simply don't understand most offered solutions.
Problem I am experiencing is that I use a script which fetches RSS feeds from our main website. This works perfectly, however it also displays the used inline styles, which are being used sometimes. Ofcourse this messes up the way things looks and looks rather, lets say, unprofessional.
I checked the source of what's being loaded and as far as I can tell, the main culprit is an inline style called:
<span style="font-family: verdana,geneva;">text</span>
Less frequent are the following ones (but still rather see them go as well):
<em>text</em>
<strong>text</strong>
<em class="moz-txt-slash">text</em>
<span class="moz-txt-tag">text</span>
Can these all be removed with jQuery or Javascript? Apparently it's possible, but I don't know how. And should I put everything in a seperate div-container?
I can live with the unnecesarry 'p's and 'br's, but rather see the other ones removed.
Anyone out there who is willing to help me with this? My gratitude!
//edit
Thank you all for the quick responses... Highly appreciated.
I use a script called MagicParser to fetch those RSS feeds. I don't know much about coding like PHP, jQuery and Javascript, but I will try to use the solutions. I hope it will work. The first one didn't though :/
You can easily target all elements that have inline styles with $("[style]") and remove the styles with .removeAttr("style"):
$("[style]").removeAttr("style");
If you have a DOM node or jQuery collection and want to remove styles from its descendants, simply use .find("[style]").removeAttr("style") on it instead.
Classes are not the same as inline styles, but you can also remove those with .removeClass().
You can use jquery:
$("#myID").attr("style","[Nothing here, or eventually styles to override]");
More info there:
http://api.jquery.com/attr/

what is '.js' doing at the beginning of a style in a stylesheet

I am having to edit somebody else's code and they seem to have used a whole load of jQuery for something that would otherwise seem quite simple to me - an html form.
When I switch off some of the jQuery I lose a load of styles and it seems that is because all the styles are pre-fixed with .js eg:
.js .classname{width:50px}
When I take out the .js bit it works, but am I missing something? What is the point in this (seemingly) over-complicated methodology?
Taking out the jquery doesn't change the markup
<div class='classname'>. Sorry for lack of code, its somebody elses. I don't know jquery and would rather not use it.
This is a common trick. The js class is added to a main element (usually HTML or sometimes BODY) using Javascript. This allows you to easily make adjustments in CSS that apply when Javascript is active/supported or not. For instance, you can show a 'refresh' button by default and hide it as soon as auto-refresh javascript events are activated.
So there's nothing special about it. Just something your predecessor has added himself/herself.

CLeditor uses the HTML 'align' attribute. How can I change that to CSS 'text-align'?

I've set up the CLeditor on a site I'm working on. Currently I'm setting it up so that as you type and edit within the editor, you can see a live preview of the results just above it, a lot like what you get when typing a StackOverflow question, though much more basic.
It works by simply copying the inner HTML of the iframe contents to another place on the page. However I've run into an annoying issue. When I use the alignment buttons (left, center, right), it adds the attribute align="right", for example, to the selected text. While it works in the editor, it does not work on the page itself, probably because that attribute is pretty much obsolete.
...
I actually figured out how to get around this issue while typing this question. Still, I'll post this question with my solution. Plus I have a relevant question to add to this.
Originally I tried applying the following CSS to the page:
div[align="right"] {
text-align:right!important;
}
This worked for initially loading the data onto the page, but while dynamically changing alignment in the editor, the live preview was not reflecting the changes. I thought at first that this was because the styles were applied at load time only.
Well, that was a brain fart because I know better than that. The real problem was that I was selecting a DIV element and the align attribute isn't necessarily applied to a DIV. Changing div[align="right"] to *[align="right"] works perfectly.
However, even though I found a workaround for this specific issue, I still can't figure out how the cleditor builds the HTML output for the iframe. Where does the align attribute come from in the code and how does it know to put it (and all of the other elements/attributes) into the HTML? If I had a way of manipulating this, I could simply tell it to use inline CSS for the alignment rather than the deprecated align HTML attribute. Please note that I do not wish to enable the cleditor's built-in "useCSS" feature.
Thanks for any information you can share, and please do not downvote this question just because I already solved the initial problem. I want this to be able to help others if they run into the same issue. (I'll also post my answer as an answer).
Applying the following CSS to the live-preview of the page works perfectly:
*[align="right"] {
text-align:right!important;
}
Don't forget to do the same for left and center as well.

element.style in Firebug

am working in a software called (opentripplanner) iam trying to make some changes in the CSS codes, but sometimes the Firebug shows (element.style) for some items CSS, i found some of the items CSS overriden in the JS codes, but for some other items i couldnot find where they are overriden though i looked everywhere..the last option left is to see the Class of the element using the firebug and then try to add it inside the CSS codes with my rules (generating new rules) but i dont really know how to do this ..anyone who can help ?????
I believe the answer you are looking for is here.
Element.style properties are introduced via Javascript and are overriding your CSS settings.

Categories