Forums

Jquery Dialog within a custom Concrete5 site

Permalink
Hello all,

Well I've been searching for about 2 hours now on the forums, reading all kinds of suggestions and got even more confused than I was at the begin. All of this, go there, maybe it's there, maybe it's here is really annoying, mostly when in the guide the location of a folder or file is non existing. (I'm getting used to it with C5, unfortunately)

Ok the issue is, that I want just a simple dialog box to pop up when I click on a span item. Lets say I have 
<span id="something">Car</span>


Now if I click on it, I just want that a box appears with a content that I am getting from a custom addon ($content). Everything I've tried doesn't quite work as I want it to, only the built in dialog worked, but it looks extremely awful. I Just want a normal box with the text that is in the $content variable.

Reading through all of these themes just got me really confused as I have no idea what is now up to date, and what isn't. If someone could help me out here I'd be very thankful!
brance
 
mkly replied on at Permalink Reply
mkly
Hello,
concrete5 ships with the jQueryUI library by default. What I typically do is write some somewhat aggressive CSS to override the default concrete5 styles. Otherwise you can try to use something like Simple Modal or another jQuery modal that is a little more theming friendly and include that in your theme.

Now that I think about it you may not be including the jQueryUI css as well as the jQueryUI javascript. If you are making a block you might add something like this in your on_page_view() method

// in controller.php of a block
public function on_page_view() {
  $this->addHeaderItem(Loader::helper('html')->css('jquery.ui.css'));
  $this->addFooterItem(Loader::helper('html')->javascript('jquery.ui.js'));
}


Best Wishes,
Mike
brance replied on at Permalink Reply
brance
Oh I see.. Well it could be that I have few external jquery links in my header file, like 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="/concrete5.6.2/themes/admeer_theme/jquery.dropdown.css" />
<script type="text/javascript" src="/concrete5.6.2/themes/admeer_theme/jquery.dropdown.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>


that is after the opening <head> tag. what I've also found is that few lines under the code above there really is jquery.ui.js included, but it seems to be included automatically there..

<link rel="stylesheet" type="text/css" href="/concrete5.6.2/concrete/css/ccm.base.css?v=f10e6f2d6a664d1a6818032716d1113f" />
<script type="text/javascript" src="/concrete5.6.2/concrete/js/jquery.js?v=f10e6f2d6a664d1a6818032716d1113f"></script>
<script type="text/javascript" src="/concrete5.6.2/concrete/js/ccm.base.js?v=f10e6f2d6a664d1a6818032716d1113f"></script>
<link rel="stylesheet" type="text/css" href="/concrete5.6.2/concrete/css/ccm.app.css?v=f10e6f2d6a664d1a6818032716d1113f" />
<link rel="stylesheet" type="text/css" href="/concrete5.6.2/concrete/css/jquery.ui.css?v=f10e6f2d6a664d1a6818032716d1113f" />
<link rel="stylesheet" type="text/css" href="/concrete5.6.2/packages/custom_objects_demo/css/custom_object_list.css?v=f10e6f2d6a664d1a6818032716d1113f" />


I have a custom dropdown nav menu where I need these manually added jquery links (added in elements/header.php) but it seems they are conflicting with the ones Concrete5 includes.. how can that be fixed?

Thanks for your time!